html - تجاوز النص لا يعمل عند استخدام العرض: flex




css flexbox (4)

إضافة الممتلكات أدناه في فئة المغلق

white-space: nowrap;
word-break: break-word;

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  ThisIsASampleText
</div>

Output: ThisIsASamp  
Expected: ThisIsASam...

عندما أقوم بإزالة خاصية flex فإنه يعمل بشكل جيد.

أود أن أعرف لماذا يؤثر المرن في الحذف.

TIA


في التكوين الخاص بك لديك عنصر فليكس حاوية حاوية مجهول يحتوي على النص الخاص بك (يمكنك الرجوع إلى التخصيص لهذا). سوف يلتزم العنصر المرن بقيود min-width وبالتالي لن يتقلص لكنه سيتجاوز ولأنه كتلة مجهولة ، فلن يكون لديك أي طريقة لتطبيق min-width عليها.

بالإضافة إلى ذلك ، يجب تطبيق خصائص التجاوز على العنصر المرن وليس الحاوية المرنة لأن هذا يحتوي على النص ولا يتم توارث خاصية التجاوز. بمعنى آخر ، عند استخدام flexbox ، سيكون لديك مستويين: الحاوية المرنة والعناصر المرنة. تحتاج إلى تطبيق كل شيء على العنصر المرن.

لنفترض أننا قمنا بإضافة span حول النص الخاص بنا ، سيكون لدينا هذا:

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

نحن الآن قادرون على استهداف العنصر المرن من أجل إضافة min-width:0 والخصائص المطلوبة من أجل الحصول على المخرجات المتوقعة:

.flex-container {
  display: flex;
  text-align: left;
}

span {
  min-width:0;
  text-overflow: ellipsis;
  overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

بدون الغلاف الإضافي ، لا يمكننا استهداف عنصر المرن لدينا وتطبيق الخصائص على الحاوية المرنة لن تفعل شيئا.


يمكنك أن تفعل شيئا مثل هذا

.flex-container {
  display: flex;
}

.flex-container p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
  ThisIsASampleText </p>
</div>






ellipsis