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?
Odpowiedzi:
Musisz mieć CSS
overflow
,width
(lubmax-width
)display
, iwhite-space
.http://jsfiddle.net/HerrSerker/kaJ3L/1/
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
(!)źródło
white-space: nowrap;
nieruchomości. Teraz możesz tylko jeden wiersz tekstu kończył się na ... zamiast tekstu blokowego.Upewnij się, że masz element bloku, maksymalny rozmiar i ustaw przelew na ukryty. (Testowane w IE9 i FF 7)
http://jsfiddle.net/uh9zD/
źródło
W przypadku wielu linii w Chrome użyj:
Inspirowany youtube ;-)
źródło
-webkit-*
właściwości, ale jest obsługiwany we wszystkich głównych przeglądarkach. Więcej informacji można znaleźć tutaj: css-tricks.com/almanac/properties/l/line-clampMiałem problem z elipsą pod chromem. Włączanie białych znaków: teraz wydawało się, że teraz to naprawić.
źródło
to i tylko to wykonało dla mnie pracę
etykietka
wszystko inne nie wykonało elipsy ....
źródło
Tylko heads-up dla każdego, kto może natknąć się na to ... Moja h2 dziedziczyła
co nie pozwalało na elipsę. Najwyraźniej to bardzo wybredna prawda?
źródło
Dodaj ten kod poniżej, gdzie chcesz
przykład
źródło
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:
źródło
Możesz spróbować użyć wielokropka, dodając następujące elementy w CSS:
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
źródło
Dodaj następujące wiersze w CSS, aby elipsa działała
źródło
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
źródło