Przepełnienie tekstu CSS: elipsa; nie działa?


368

Nie wiem, dlaczego ten prosty CSS nie działa ...

.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>

Należy odciąć około 4. „testu”




FF only- jeśli filterzostanie zastosowane, elipsa nie będzie renderowana. błąd otwarty
vsync

1
Napisałem post na temat rozwiązywania problemów z text-overflow: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow
Fausto NA

1
w moim przypadku pomogło usunięcie display: flex z elementu
Eduard

Odpowiedzi:


908

text-overflow:ellipsis; działa tylko wtedy, gdy są spełnione następujące warunki:

  • Szerokość elementu musi być ograniczona w px(pikselach). Szerokość w %(procentach) nie będzie działać.
  • Element musi mieć overflow:hiddeni white-space:nowrapustawiony.

Powodem, dla którego masz problemy, jest to, że widthtwój aelement nie jest ograniczony. Masz widthustawienie, ale ponieważ element jest ustawiony na display:inline(tj. Domyślny), ignoruje go i nic innego nie ogranicza jego szerokości.

Możesz to naprawić, wykonując jedną z następujących czynności:

  • Ustaw element na display:inline-blocklub display:block(prawdopodobnie ten pierwszy, ale zależy od potrzeb układu).
  • Ustaw jeden z jego elementów kontenerowych display:blocki nadaj temu elementowi stały widthlub max-width.
  • Ustaw element na float:leftlub float:right(prawdopodobnie ten pierwszy, ale znowu, oba powinny mieć taki sam efekt, jeśli chodzi o elipsę).

Sugeruję display:inline-block, ponieważ będzie to miało minimalny wpływ na twój układ; działa bardzo podobnie, jak display:inlineobecnie, jeśli chodzi o układ, ale możesz eksperymentować również z innymi punktami; Próbowałem podać jak najwięcej informacji, aby pomóc ci zrozumieć, jak te rzeczy współdziałają ze sobą; duża część zrozumienia CSS polega na zrozumieniu, w jaki sposób różne style współpracują ze sobą.

Oto fragment kodu wraz z display:inline-blockdodanym kodem , który pokazuje, jak blisko byłeś.

.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>

Przydatne referencje:


12
Co jeśli nie mogę użyć ustawionej szerokości z powodu responsywnego projektu?
SearchForKnowledge

5
Pamiętaj, że maksymalna szerokość również działa. Pomogło mi to, ponieważ miałem ikonę, która musiała przytulać koniec tekstu, niezależnie od jego szerokości. (W przeciwnym razie ikona przesuwałaby się w prawo, gdyby tekst nie zajmował pełnej szerokości zakresu)
Kevin

2
Uwaga: w white-space: nowraprzeczywistości nie jest konieczne. Wciąż możemy zobaczyć elipsy nawet bez niego. W przypadku wielu wierszy text-overflowzobacz ten SO
gfacless

24
Nie jestem pewien, czy jest to ostatnia zmiana, czy nie, ale w Chrome 50 (beta) nie musisz ustawiać szerokości na wartość px - „100%” również działa. white-space: nowrapjest wymagane.
thdoan

13
W ogóle nie musisz ustawiać stałej width. Wszystko, co musisz zrobić, to ustawić white-space: nowrap;i działa dobrze.
adamj

37

Przyjęta odpowiedź jest niesamowita. Możesz jednak nadal używać %szerokości i osiągać text-overflow: ellipsis. Rozwiązanie jest proste:

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

Wydaje się, że za każdym razem calckońcowa wartość jest renderowana w pikselach bezwzględnych, co w konsekwencji przekształca 80%się w coś podobnego 800pxdo 1000pxkontenera o szerokości. Dlatego zamiast używać width: [YOUR PERCENT]%, użyj width: calc([YOUR PERCENT]%).


16

Jeśli więc odpowiesz na to pytanie, ponieważ masz problem z uruchomieniem wielokropka w display: flexkontenerze, spróbuj dodać min-width: 0do skrajnego kontenera, który jest przepełniony jego elementem nadrzędnym, nawet jeśli już go ustawiłeś overflow: hidden, i zobacz, jak to działa.

Więcej szczegółów i działający przykład na tym codepen autorstwa aj- fostera . W moim przypadku całkiem nieźle.


2
Świetne rozwiązanie - jest to również jedyne opublikowane tutaj, które działa dla position: stickyelementu w display: flexkontenerze.
James Dinsdale,

2
Myślę, że powinno to być uwzględnione w wybranej odpowiedzi. To rozwiązało mój problem. Dzięki!
j0nd0n7,

1
Pan jest geniuszem.
Nathan Osman

1
dzięki stary, uratowałeś dzień
Parasol

7

Upewnij się również, że word-wrapjest ustawiony na normalny dla IE10 i niższych.

Poniższe standardy definiują zachowanie tej właściwości jako zależne od ustawienia właściwości „zawijania tekstu”. Jednak ustawienia wordWrap są zawsze skuteczne w Windows Internet Explorer, ponieważ Internet Explorer nie obsługuje właściwości „zawijania tekstu”.

Stąd w moim przypadku word-wrapustawiono słowo kluczowe (odziedziczone czy domyślnie?) Powodujące text-overflowdziałanie w FF i Chrome, ale nie w IE.

informacje ms na temat właściwości zawijania słów


5

anchor, span... tagi są domyślnie elementami wbudowanymi. W przypadku elementów wbudowanych widthwłaściwość nie działa. Więc musisz przekonwertować swój element na jeden inline-blocklub jeden block levelelement


5

Dołącz cztery wiersze napisane po informacji o elipsie do działania

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

 /* 
 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;
}



1

W bootstrap 4 możesz dodać .text-truncateklasę, która obcina tekst za pomocą wielokropka.

<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>


1

Musi zawierać

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

NIE MOŻE zawierać

display: inline

Powinien zawierać

position: sticky


0

Musiałem zrobić kilka długich opisów elipsą (wziąć tylko jeden pas), będąc jednocześnie responsywnym, więc moim rozwiązaniem było pozostawienie tekstu (zamiast white-space: nowrap) i zamiast stałej szerokości dodałem stałą wysokość:

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

Napotkałem ten sam problem i wydaje się, że żadne z powyższych rozwiązań nie działa w przeglądarce Safari. W przypadku przeglądarki innej niż Safari działa to dobrze:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

W przypadku Safari ten działa dla mnie. Pamiętaj, że zapytanie o media, aby sprawdzić, czy przeglądarka to Safari, może się zmieniać z czasem, więc po prostu majstruj przy zapytaniu o media, jeśli nie działa dla ciebie. W przypadku line-clampwłaściwości można również mieć wiele linii w sieci za pomocą wielokropka, patrz tutaj .

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

0

https://stackoverflow.com/a/53784508/5626747

Nie mogę komentować z powodu reputacji, więc udzielam innej odpowiedzi:

W takim przypadku musisz również usunąć ogólnie sugerowaną display: block;właściwość z elementu, który ustawiłeś text-overflow: ellipsis;, lub zostanie odcięty bez ... na końcu.


-1

Zapisz je w regule css.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Możesz także przejrzeć to, jsfiddle.net/ManiAnand/5v6pfy9w
Mani Abi Anand

Jeśli można podać szerokość, moja odpowiedź nie jest błędna. Dopiero co dodałeś blok wyświetlania w mojej odpowiedzi, napisałem fragment kodu, a nie całe kody, więc można dodawać inne rzeczy, ale nie mają one nic wspólnego z problemem !! Czy możesz podać, w jaki sposób moja odpowiedź jest nieprawidłowa?
Siraj Alam,

1
Należy podać szerokość, a także wyświetlacz. Jeśli szerokość procentowa lub nieokreślona i nie ustawiona na twarde jednostki, przepełnienie nie będzie ograniczone i nie będzie działać. Zobacz zaakceptowaną odpowiedź.
jlesse

Szerokość została już ustawiona przez op. Dałem fragment kodu, aby dodać jego kody
Siraj Alam,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.