Ответ 1
Если вы хотите ограничить его одной строкой, используйте white-space: nowrap; в div.
Css overflow - только 1 строка текста
У меня есть div со следующим стилем css:
width:335px; float:left; overflow:hidden; padding-left:5px;
Когда я вставляю в эту 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;
вы можете попробовать это...