CSS text-overflow: ellipsis; nie działa?

Przyjęta odpowiedź jest niesamowita. Możesz jednak nadal używać % width 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, gdy używasz calc, ostateczna wartość jest renderowana w pikselach bezwzględnych, co w konsekwencji konwertuje 80% na coś w rodzaju 800px dla kontenera o szerokości 1000px. Dlatego zamiast używać width: [YOUR PERCENT]%, użyj width: calc([YOUR PERCENT]%).

Więc jeśli osiągniesz to pytanie, ponieważ masz problem z uruchomieniem elipsy wewnątrz display: flex kontenera, spróbuj dodać min-width: 0 do kontenera, który jest przepełniony jego rodzicem, mimo że ustawiłeś już overflow: hidden na nim i zobacz, jak to działa.

Więcej SZCZEGÓŁÓW I roboczy przykład na ten codepen by aj-foster . W moim przypadku zadziałało.

Dołącz cztery linie napisane po informacji o elipsie do pracy

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

Upewnij się również, że word-wrap jest ustawione na normal dla IE10 i poniżej.

poniższe standardy definiują zachowanie tej właściwości jako zależne od ustawienia właściwości "Text-wrap". Jednak ustawienia wordWrap są zawsze skuteczne w Windows Internet Explorer, ponieważ Internet Explorer nie obsługuje właściwości "zawijanie tekstu".

Stąd w moim przypadku word-wrap zostało ustawione na break-word (dziedziczone czy domyślnie?) powoduje, że text-overflow pracuje w FF i Chrome, ale nie w IE.

Ms info on word-wrap property

anchor,span... tagi są elementy inline domyślnie w przypadku elementów wbudowanych właściwość width nie działa. Więc musisz przekonwertować swój element na inline-block lub block level elementy

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

Demo

Wystarczy dodać jedną linię css:

.app a {
   display: inline-block;
}

W bootstrap 4, możesz dodać klasę .text-truncate, aby obciąć tekst wielokropkiem.

<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

Spotkałem się z tym samym problemem i wydaje się, że żadne z powyższych rozwiązań nie działa dla Safari. W przypadku przeglądarek innych niż safari działa to dobrze:

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

// 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ę skomentować ze względu na reputację, więc robię kolejną odpowiedź:

W tym przypadku będziesz musiał również usunąć ogólnie sugerowaną Właściwość display: block; z elementu, na którym Ustawiłeś text-overflow: ellipsis;, lub zostanie ona odcięta bez ... na końcu.

Musiałem zrobić kilka długich opisów elipsy(wziąć tylko jeden pas) będąc responsywnym, więc moim rozwiązaniem było, aby tekst zawijał się(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>

Możesz również dodać float: left; wewnątrz tej klasy # User_Apps_Content .DLD_App a

Zapisz je w swojej regułce css.

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