it-swarm.asia

CSS-overflow: Ellipsis؛ لا يعمل؟

لا أعرف لماذا لا يعمل هذا CSS البسيط ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: Ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

يجب أن تقطع حول "الاختبار" الرابع

297
ChristopherStrydom

text-overflow:Ellipsis; يعمل فقط عندما يكون التالي صحيحاً:

  • يجب أن يكون عرض العنصر مقيدًا بـ px (بكسل). العرض في % (النسبة المئوية) لن يعمل.
  • يجب أن يكون للعنصر overflow:hidden و white-space:nowrap.

سبب مواجهتك للمشاكل هنا هو أن عنصر width الخاص بعنصر a ليس مقيدًا. لديك إعداد width ، ولكن نظرًا لتعيين العنصر على display:inline (أي الافتراضي) فإنه يتجاهله ، ولا يوجد شيء آخر يقيد عرضه أيضًا.

يمكنك إصلاح هذا عن طريق القيام بأحد الإجراءات التالية:

  • عيّن العنصر إلى display:inline-block أو display:block (ربما الأول ، لكن يعتمد على احتياجات التصميم الخاصة بك).
  • قم بتعيين أحد عناصر الحاوية الخاصة به على display:block ومنح هذا العنصر width ثابت أو max-width ثابتًا.
  • عيّن العنصر إلى float:left أو float:right (ربما الأول ، لكن مرة أخرى ، يجب أن يكون لأي منهما نفس التأثير فيما يتعلق بـ Ellipsis).

أقترح display:inline-block ، حيث سيكون لهذا الحد الأدنى من التأثير الجانبي على تخطيطك ؛ إنه يشبه إلى حد كبير display:inline الذي يستخدمه حاليًا فيما يتعلق بالتخطيط ، ولكن لا تتردد في تجربة النقاط الأخرى أيضًا ؛ لقد حاولت تقديم أكبر قدر ممكن من المعلومات لمساعدتك في فهم كيفية تداخل هذه الأشياء معًا ؛ جزء كبير من فهم CSS يتعلق بفهم كيفية عمل أنماط مختلفة معًا.

امل ان يساعد.

في ما يلي مقتطف برمزك ، مع إضافة display:inline-block ، لإظهار مدى قربك.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: Ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

مراجع مفيدة:

759
Spudley

الجواب المقبول رائع. ومع ذلك ، لا يزال بإمكانك استخدام عرض % وتحقيق text-overflow: Ellipsis. الحل بسيط:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: Ellipsis;
width: calc (80%); /* The trick is here! */

يبدو أنه عند استخدامك calc ، يتم تقديم القيمة النهائية بالبكسل المطلق ، والتي تحول بالتالي 80% إلى شيء مثل 800px لحاوية 1000px- بعرض. لذلك ، بدلاً من استخدام width: [YOUR PERCENT]% ، استخدم width: calc([YOUR PERCENT]%).

14
Trouble Zero

تأكد أيضًا من تعيين Word-wrap على طبيعي لـ IE10 وتحته.

تحدد المعايير المشار إليها أدناه سلوك هذه الخاصية على أنها تعتمد على إعداد خاصية "التفاف النص". ومع ذلك ، تكون إعدادات WordWrap فعالة دائمًا في Windows Internet Explorer لأن Internet Explorer لا يدعم خاصية "التفاف النص".

وبالتالي ، في حالتي ، تم ضبط Word-wrap على break-Word (موروثة أو بشكل افتراضي؟) مما تسبب في text-overflow للعمل في FF و Chrome ، ولكن ليس في IE.

معلومات ms على خاصية التفاف الكلمات

7
Tim Vermaelen

anchor، span... العلامات هي عناصر مضمنة بشكل افتراضي ، في حالة وجود عناصر مضمنة width لا تعمل الخاصية. لذا يجب عليك تحويل العنصر الخاص بك إلى عناصر inline-block أو block level

5
santhoshkumar

قم بتضمين الأسطر الأربعة المكتوبة بعد المعلومات لكي يعمل Ellipsis

.app a {
        height: 18px;
        width: 140px;
        padding: 0;
        position: relative;
        margin: 0 5px 0 5px;
        font: bold 15px/18px Arial;
        text-align: center;
        text-decoration: none;
        color: #FFF;

        /* 
           **Note:**The Below 4 Lines are necessary 
           for Ellipsis to work
        */
        display: block; // change it as per your requirement
        overflow: hidden;
        text-overflow: Ellipsis;
        white-space: nowrap;

    }
3
Manoj Selvin

يمكنك فقط إضافة سطر واحد css:

.app a {
   display: inline-block;
}
2
Sanjib Debnath

أضف display: block; أو display: inline-block; إلى #User_Apps_Content .DLD_App a

عرض توضيحي

2
Bhojendra Rauniyar

لذلك إذا وصلت إلى هذا السؤال لأنك تواجه مشكلة في محاولة جعل Ellipsis يعمل داخل حاوية display: flex ، فحاول إضافة min-width: 0 إلى الحاوية البعيدة التي تفيض على والدها على الرغم من أنك قمت بالفعل بتعيين overflow: hidden لها ومعرفة كيف يعمل ذلك لك .

مزيد من التفاصيل ومثال العمل على هذا codepen by aj-foster . فعلت تماما خدعة في حالتي.

1
Herick

يمكنك أيضًا إضافة float: left؛ داخل هذه الفئة #User_Apps_Content .DLD_App

0
Shabbir Lakdawala

اضطررت إلى إجراء بعض الأوصاف الطويلة للقطع الناقص (خذ حارة واحدة فقط) أثناء الاستجابة ، لذلك كان حلي هو ترك النص يلتف (بدلاً من white-space: nowrap) وبدلاً من العرض الثابت أضفت ارتفاعًا ثابتًا:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>
0
T04435

فيbootstrap 4، يمكنك إضافة فئة .text-truncate لاقتطاع النص باستخدام Ellipsis.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>
0
Penny Liu

يجب أن تحتوي على

  text-overflow: Ellipsis;
  white-space: nowrap;
  overflow: hidden;

يجب ألا تحتوي

display: inline

يجب أن يحتوي

position: sticky
0
Cryptopat