मैंने फ्लेक्स यूटिलिटीज की मदद से टेलविंड सीएसएस के साथ एक पेज लेआउट बनाया है। अब मैं एक मुद्दे से जूझ रहा हूं।

दाईं ओर शीर्षक और विवरण के साथ एक शीर्ष लेख अनुभाग है।

मैं अब चाहता हूं कि विवरण कभी भी चौड़ाई के 100% से अधिक नहीं ले रहा है और यदि इसमें अधिक है तो स्वचालित रूप से पाठ को छोटा कर देता है।

मैंने अपनी समस्या का प्रदर्शन करने के लिए एक कामकाजी उदाहरण तैयार किया:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex bg-blue-100 h-screen">
  <div class="bg-green-100 w-16 flex-none">A</div>
  <div class="bg-blue-100 w-96 flex-none">SB</div>
  <div class="bg-red-100 flex-auto">
    <div class="flex flex-col">
      <div class="flex flex-col space-y-2 bg-pink-100 p-3">
        <h1 class="bg-yellow-100">Title</h1>
        <h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
      </div>
      <div class="bg-pink-200 p-3">...</div>
    </div>
  </div>
</div>

यह बहुत अच्छा होगा अगर कोई इस समस्या को हल करके मेरी मदद कर सके।

अग्रिम में बहुत धन्यवाद

काई

0
Kergorian 21 नवम्बर 2021, 15:10

2 जवाब

सबसे बढ़िया उत्तर

अपने तीसरे कॉलम में बस 'ओवरफ्लो-हिडन' जोड़ें।

<div class="flex bg-blue-100 h-screen">
  <div class="bg-green-100 w-16 flex-none">A</div>
  <div class="bg-blue-100 w-96 flex-none">SB</div>
  <div class="bg-red-100 flex-auto overflow-hidden">
    <div class="flex flex-col">
      <div class="flex flex-col space-y-2 bg-pink-100 p-3">
        <h1 class="bg-yellow-100">Title</h1>
        <h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
      </div>
      <div class="bg-pink-200 p-3">...</div>
    </div>
  </div>
</div>
1
NICO 21 नवम्बर 2021, 15:24
यह अपेक्षा से अधिक आसान था। बहुत बहुत धन्यवाद निको
 – 
Kergorian
21 नवम्बर 2021, 15:43

मेरा सुझाव है कि आप ओवरफ्लो-इलिप्सिस का एक साथ ओवरफ्लो-हिडन का उपयोग करें, जो आपको वर्णन करने में मदद करेगा कि कभी भी 100% से अधिक चौड़ाई नहीं ले रहा है, यहां तक ​​​​कि टैबलेट मोड (768 पीएक्स) पर आसानी से उत्तरदायी डिजाइन के लिए भी मदद करता है

<div class="flex flex-col space-y-2 bg-pink-100 p-3 ">
    <h1 class="bg-yellow-100">Title</h1>
    <h2 class="bg-yellow-200 overflow-clip overflow-hidden">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>

मुझे आशा है कि आपकी मदद की

0
mohammadreza khorrami 21 नवम्बर 2021, 16:02