Css overflow - только 1 строка текста

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

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

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

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

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

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

Ответ 1

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

Ответ 2

Если вы хотите указать, что в этом div еще есть контент, возможно, вам захочется показать "многоточие":

text-overflow: ellipsis;

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

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

Ответ 3

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

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

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

Обратите внимание, что переполнение текста происходит только тогда, когда свойство переполнения контейнера имеет значение скрытое, прокрутка или авто. > и белое пространство: nowrap;.

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

display: inline-block;

на рассматриваемом div.

Ответ 7

line-height:335px;

вы можете попробовать это...