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

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”

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

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]%).

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.

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

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

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

Dodaj display: block;lub display: inline-block;do swojego#User_Apps_Content .DLD_App a

próbny

Po prostu dodajesz jedną linię css:

.app a {
   display: inline-block;
}

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>

Musi zawierać

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

NIE MOŻE zawierać

display: inline

Powinien zawierać

position: sticky

Możesz także dodać float: left; wewnątrz tej klasy #User_Apps_Content .DLD_App a

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>

To jest kod, który pozwala:

overflow: hidden;
text-overflow: ellipsis;

przepełnienie: ukryty jest wymagany

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

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.

Zapisz je w regule css.

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