css overflow - всего 1 строка текста

134

У меня divследующий стиль css:

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

Когда я вставляю в divнее длинную строку текста, она переходит на новую строку и отображает весь текст. Я хочу, чтобы у меня была только одна строка текста без разрывов строки. Когда текст длинный, я хочу, чтобы этот переполненный текст исчез.

Я думал установить высоту, но это кажется неправильным.

Может быть, если я добавлю такую ​​же высоту, что и шрифт, он должен работать и не вызывать проблем в разных браузерах?

Как я могу это сделать?

html css overflow Homerun
источник
Можете ли вы продемонстрировать свою проблему на jsFiddle ?
Гарри Джой

Ответы:

352

Если вы хотите ограничить его одной строкой, используйте white-space: nowrap;в div.

Septnuits
источник
Но тогда многоточие не отображается, если текст выходит за пределы указанного размера. stackoverflow.com/questions/26342411/…
SearchForKnowledge
Работает, отлично. Но мне нужно ..., чтобы показать больше символов, потому что, когда длина строки длинная, и она выходит из написанного div.
Moshii
Это выглядит странно, если скрытый текст содержит гиперссылки. Если бы я пролистал страницу с вкладкой, это привело бы к тому, что ссылка в скрытом тексте прокручивалась на экран, когда она должна быть скрыта.
Эрик
76

Если вы хотите указать, что в этом div все еще доступно больше контента, вы, вероятно, захотите отобразить «многоточие»:

text-overflow: ellipsis;

Это должно быть в дополнение к white-space: nowrap;предложению Septnuits.

Кроме того, не забудьте проверить этот поток, чтобы справиться с этим в Firefox.

Mouli
источник
47
Я считаю, что вы должны использовать text-overflow: ellipsis;с, overflow: hidden;и white-space: nowrap;чтобы это работало
Франсиско Коста
caniuse.com/#feat=text-overflow aka. Да, ты можешь. Рассмотрите возможность размещения всего содержимого в атрибуте title, чтобы у пользователя по-прежнему был к нему доступ.
DanMan
мой просто отображается в одной строке и не заполняет DIV перед отображением многоточия ... stackoverflow.com/questions/26342411/… ( jsfiddle.net/ofrj55j4/20 )
SearchForKnowledge
44

Вы можете использовать этот код css:

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

Свойство text-overflow в CSS имеет дело с ситуациями, когда текст обрезается, когда он выходит за пределы поля элемента. Его можно обрезать (то есть обрезать, скрыть), отображать многоточие ('…', значение диапазона Unicode U + 2026).

Обратите внимание, что переполнение текста происходит только тогда, когда свойство переполнения контейнера имеет значение hidden , scroll или auto и white-space: nowrap; ,

Переполнение текста может происходить только для элементов уровня блока или встроенного блока , потому что элемент должен иметь ширину, чтобы его можно было переполнить. Переполнение происходит в направлении, определяемом свойством direction или связанными атрибутами.

Гаурав Трипати
источник
6

лучший код для UX и UI - это

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
Омид Ахмадяни
источник
0

если дополнительно, пожалуйста, если у вас длинный текст, вы можете использовать этот код CSS ниже;

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

сделать видимым весь текст строки.

Шафии Мухуди
источник
0 
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Определите ширину также, чтобы установить переполнение в одной строке

Джейдип Катария
источник
-2

У меня была такая же проблема, и я решил ее, используя:

display: inline-block;

по рассматриваемому divвопросу.

Dekcolnu
источник