css przepełnienie - tylko 1 wiersz tekstu

mam div z następującym stylu CSS:css przepełnienie - tylko 1 wiersz tekstu

width:335px; float:left; overflow:hidden; padding-left:5px;

Po włożeniu, w tym div, długa linia tekstu, to złamanie do nowej linii i wyświetla wszystko tekst. Potrzebuję tylko jednego wiersza tekstu, który nie będzie łamał wiersza. Kiedy tekst jest długi, chcę, aby ten przepełniony tekst zniknął.

Myślałem o ustawieniu wysokości, ale wygląda na to, że jest źle.

Może jeśli dodaję wysokość, która jest taka sama jak czcionka, powinna działać i nie powodować żadnych problemów w różnych przeglądarkach?

Jak mogę to zrobić?

Źródło

2011-09-25 some Folk

Czy możesz zademonstrować swój problem na [jsFiddle] (http://jsfiddle.net/)? –

242

Jeśli chcesz ograniczyć go do jednej linii, użyj white-space: nowrap; na div.

Źródło

2011-09-25 15:16:20 Septnuits

działa świetnie, dzięki! –

Powinieneś wtedy przyjąć jego odpowiedź, klikając strzałkę po lewej stronie. – DanMan

niesamowite, dzięki! –

-8

line-height:335px;

można spróbować to ...

Źródło

2011-09-25 15:20:01 bshener

... w czym to pomaga? – Archonic

Jeśli chcesz, aby wskazać, że jest jeszcze więcej treści dostępne w tej div, można prawdopodobnie chcesz, aby pokazać „wielokropek”:

text-overflow: ellipsis;

Powinno to być uzupełnieniem do white-space: nowrap; zasugerowanego przez Septnuits.

Pamiętaj też, aby skorzystać z tej usługi w przeglądarce Firefox pod adresem this thread.

Źródło

2011-09-25 15:32:10 Mouli

+35

Wierzę, że musisz użyć 'text-overflow: ellipsis;' z 'overflow: hidden;' i 'white-space: nowrap;' aby to zadziałało –

http://caniuse.com/#feat=text-overflow aka . tak, możesz. Rozważ umieszczenie całej treści w atrybucie title, aby użytkownik nadal miał do niej dostęp. – DanMan

mine pokazuje się w jednej linii i nie wypełnia DIV przed wyświetleniem elipsy ... http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts (http://jsfiddle.net/ofrj55j4/20/) – SearchForKnowledge

miałem ten sam problem i rozwiązać go za pomocą:

display: inline-block;

na div mowa.

Źródło

2014-06-03 13:07:02 Dekcolnu

Można użyć tego kodu CSS:

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

The text-overflow własności w CSS zajmuje się sytuacje, w których tekst jest obcięty, kiedy przelewa pole elementu. Może to być przycięte (tj. Obcięte, ukryte), wyświetlać ellipsis ("...", wartość zakresu Unicode U + 2026).

Zauważ, że text-overflow występuje tylko wtedy, gdy właściwość overflow kontenera ma wartość ukryty, przewijania lub auto i white-space: nowrap;.

Tekst przepełnienie może wystąpić jedynie bloku lub inline bloku elementy poziomu, ponieważ element musi mieć szerokość, aby być przepełnienia ed. Przepełnienie następuje w kierunku określonym przez właściwość direction lub powiązane atrybuty.

Źródło

2017-03-28 05:25:27

ellipsis! wyjaśnienie, co robi i dlaczego jest fajne, byłoby fajne, chociaż ... – benzkji

css przepełnienie - tylko 1 wiersz tekstu

Odpowiedz

Powiązane problemy