tekst przepełnienia wielokropek: unikać słowo złamać

Question

W mojej stronie mam div z ustalonym szerokości i stosując następujący CSS:

width: 200px; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 

wielokropka działa, problemem jest to, że odcina ostatnie słowo, a ja chciałem, aby umieścić elipsę (...) w finale pełnego słowa.

Na przykład, jeśli mam tekst: "stackoverflow jest najlepszy", a jeśli trzeba go przyciąć pod koniec, chcę, aby wyświetlał "stackoverflow is the ..." zamiast "stackoverflow jest być ... "

Answer 1

Obawiam się, że to niemożliwe. Był raz text-overflow: ellipsis-word, który by to zrobił, ale nie został zaimplementowany w przeglądarkach i został usunięty z wersji roboczych CSS3.

Answer 2

Istnieje wtyczka jQuery, która to robi, o nazwie dotdotdot.

Działa również w przypadku tekstu wielowierszowego i dostosowuje się w sposób responsywny, jeśli tekst zawraca się, np. jeśli zmieni się rozmiar ekranu. Obejmuje również inteligentne skracanie nazw ścieżek, np. http://example.com/some/long/.../path.html

---

Należy pamiętać o możliwości wystąpienia problemów przejściowymi szerokość oparte w przypadkach, gdy zmiany szerokości lub staje się niedostępny w sposób wtyczka może nie oczekiwać, jak wtedy, gdy tekst jest początkowo ukryty lub jeśli zmienia czcionkę (np. ładowanie czcionek internetowych w niektórych przeglądarkach). Może wymagać ponownego zastosowania lub zastosowania po takich zmianach.

Jednak w 99% przypadków wtyczka wydaje się szybka i niezawodna.

Answer 3

Oczywiście, że to możliwe. (Jeśli jesteś gotów zmienić swoje znaczniki kawałek.)

https://jsfiddle.net/warphLcr/

<style> 
    .foo { 
    /* Make it easy to see where the cutoff point is */ 
    border: 2px solid #999; 

    padding-right: 18px; /* Always have room for an ellipsis */ 
    width: 120px; 
    height: 1.1em; /* Only allow one line of text */ 
    overflow: hidden; /* Hide all the text below that line */ 
    background-color: #fff; /* Background color is required */ 
    } 
    .foo > span { 
    display: inline-block; /* These have to be inline block to wrap correctly */ 
    position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */ 
    background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */ 
    white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */ 
    } 
    .foo > span:after { 
    position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */ 
    content: "…"; /* Each span has an ellipsis */ 
    } 
    .foo > span:last-child:after { 
    content: ""; /* Except for the last one */ 
    } 
</style> 

<div class="foo"> 
    <!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible --> 
    <span>stackoverflow</span><span> is</span><span> the</span><span> best</span> 
</div>