Переполнение CSS - только 1 строка текста

Question

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

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

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

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

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

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

Answer 1

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

Answer 2

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

text-overflow: ellipsis;

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

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

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

display: inline-block;

на div в вопросе.