مشكلةتم الحل

النص العريض بيبوظ التصميم: مشكلة خروج النص بره الـ Flex Container في CSS

·١٩ يوليو ٢٠٢٦·6 مشاهدة

أنا بعمل كارت (Card) لعرض بيانات المستخدم، ومقسم الكارت ده باستعمال display: flex. جوه الكارت فيه صورة وعلى يمينها اسم المستخدم ووصف طويل عنه. المطلوب: لما الوصف يكون طويل، يقطع وينزل في سطر جديد تلقائي (Wrap) أو يعمل نقاط في الآخر (text-overflow: ellipsis) ومن غير ما يبوظ حجم الكارت. المشكلة اللي مقابلاني: أول ما النص يكون طويل وميهوش مسافات (زي رابط URL طويل مثلاً)، النص بيقعد يفرش بالعرض ويخرج بره الكارت وبره الشاشة كلها، والـ Flex item مش راضي يحترم المساحة المحددة ليه خالص ومصمم ياخد مساحة النص كاملة! جربت أدي للـ text متغيّرات زي word-break: break-all أو overflow: hidden ومفيش أي فايدة، النص برضه كاسر الحيطة وخارج بره!

HTML

<div class="card">
  <div class="avatar">الصورة</div>
  <div class="content">
    <h3>اسم المستخدم</h3>
    <!-- السطر اللي بيبوظ الدنيا ويخرج بره الكارت -->
    <p class="description">https://nouvil.com/very/long/url/that/breaks/everything/and/goes/out/of/the/screen/bounds/for/testing</p>
  </div>
</div>

CSS

.card {
  display: flex;
  width: 400px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 15px;
}

.avatar {
  width: 50px;
  height: 50px;
}

.content {
  display: flex;
  flex-direction: column;
  /* السطر المفقود هنا في الـ Flex Item الرئيسي */
}

.description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* المفروض يعمل نقط بس مش شغال! */
}

مشاكل-css تنسيق-flexbox أخطاء-الويب تصميم-responsive كود-html-css حل-مشاكل-css مشاكل-فرونت-اند تطوير-واجهات

التعليقات (1)

الحل المعتمد

nouvilمنذ 91 يوم

عناصر الـ Flex (الـ Flex Items) بيبقوا واخدين قيمة افتراضية للعرض الأدنى اسمها min-width: auto. القيمة دي بتجبر العنصر إنه يتمدد وميصغرش أبدًا عن حجم المحتوى اللي جواه (حتى لو المحتوى ده نص طويل جداً مش متقطع). علشان كده، مهما كتبت خواص لقطع النص جوه الـ .description مش هتشتغل، لأن الـ Parent بتاعه (.content) عمال يتمدد لبره الكارت أصلاً! علشان تجبر الـ Flex Item إنه يحترم حدود الأب وميتمددش أكتر من المساحة المتاحة ليه، لازم تديله خاصية min-width: 0; على العنصر الأب المباشر للنص (اللي هو .content) كالتالي:

CSS

.content {
  display: flex;
  flex-direction: column;
  
  /* الحل هنا */
  min-width: 0; 
}

.description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* دلوقتي النقاط هتظهر والنص هيتقطع بنجاح! */
}

سجّل دخولك لإضافة تعليق

تسجيل الدخول

النص العريض بيبوظ التصميم: مشكلة خروج النص بره الـ Flex Container في CSS

mahmoud

·١٩ يوليو ٢٠٢٦·6 مشاهدة

HTML

<div class="card">
  <div class="avatar">الصورة</div>
  <div class="content">
    <h3>اسم المستخدم</h3>
    <!-- السطر اللي بيبوظ الدنيا ويخرج بره الكارت -->
    <p class="description">https://nouvil.com/very/long/url/that/breaks/everything/and/goes/out/of/the/screen/bounds/for/testing</p>
  </div>
</div>

CSS

.card {
  display: flex;
  width: 400px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 15px;
}

.avatar {
  width: 50px;
  height: 50px;
}

.content {
  display: flex;
  flex-direction: column;
  /* السطر المفقود هنا في الـ Flex Item الرئيسي */
}

.description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* المفروض يعمل نقط بس مش شغال! */
}

.content { display: flex; flex-direction: column; /* الحل هنا */ min-width: 0; } .description { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* دلوقتي النقاط هتظهر والنص هيتقطع بنجاح! */ }