przepełnienie tekstu: elipsa nie działa

Oto, co próbowałem (patrz tutaj ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Zasadniczo chcę, aby rozpiętość zmniejszyła się z elipsą, gdy okno jest małe. Co zrobiłem źle?

Musisz mieć CSS overflow, width(lub max-width) display, i white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Dodatek Jeśli chcesz zapoznać się z technikami zaciskania linii (Elipsy przepełnienia wielowierszowego), zajrzyj na tę stronę sztuczek CSS: https://css-tricks.com/line-clampin/

Dodatek2 (maj 2019)
Jak twierdzi ten link , Firefox 68 będzie obsługiwał -webkit-line-clamp(!)

Upewnij się, że masz element bloku, maksymalny rozmiar i ustaw przelew na ukryty. (Testowane w IE9 i FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

W przypadku wielu linii w Chrome użyj:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Inspirowany youtube ;-)

Miałem problem z elipsą pod chromem. Włączanie białych znaków: teraz wydawało się, że teraz to naprawić.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

word-wrap: break-word;

to i tylko to wykonało dla mnie pracę

<pre> </pre> 

etykietka

wszystko inne nie wykonało elipsy ....

Tylko heads-up dla każdego, kto może natknąć się na to ... Moja h2 dziedziczyła

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

co nie pozwalało na elipsę. Najwyraźniej to bardzo wybredna prawda?

Dodaj ten kod poniżej, gdzie chcesz

przykład

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Dla wielu linii

W chrome możesz zastosować ten css, jeśli chcesz zastosować wielokropek na wielu liniach.

Możesz także dodać szerokość w swoim css, aby określić element o określonej szerokości:

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Możesz spróbować użyć wielokropka, dodając następujące elementy w CSS:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ale wygląda na to, że ten kod dotyczy tylko przycinania jednowierszowego. Więcej sposobów przycinania tekstu i wyświetlania wielokropka można znaleźć na tej stronie: http://blog.sanuker.com/?p=631

Dodaj następujące wiersze w CSS, aby elipsa działała

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

Dla tych z nas, którzy nie chcą używać stałej szerokości , działa również przy użyciu display: inline-grid. Więc wraz z wymaganymi właściwościami po prostu dodajeszdisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}