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

Question

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

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

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

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

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

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

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

529 6

html css overflow

6 ответов:

Comments

Ничего не найдено.

Septnuits · Accepted Answer · 2011-09-25 18:16:20

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

Mouli · Accepted Answer · 2017-05-23 15:02:49

Если вы хотите указать, что в этом div есть еще больше контента, вы, вероятно, захотите показать "многоточие":
text-overflow: ellipsis;
Это должно быть в дополнение к white-space: nowrap;, предложенному Септнуитами.

Также убедитесь, что вы проверяете этот Поток для обработки этого в Firefox.

Gaurav Tripathi · Accepted Answer · 2017-09-13 13:52:35

Вы можете использовать этот код css:
text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;
СВОЙСТВОtext-overflow в CSS имеет дело с ситуациями, когда текст обрезается, когда он переполняет поле элемента. Он может быть обрезан (т. е. отрезан, скрыт), отображать многоточие ('...', значение диапазона Юникода U+2026).

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

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

Omid Ahmadyani · Accepted Answer · 2018-09-11 09:10:45

Лучший код для UX и UI -
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

Dekcolnu · Accepted Answer · 2014-06-03 16:41:35

У меня была та же проблема, и я решил ее с помощью:
display: inline-block;
По вопросу div.

bshener · Accepted Answer · 2011-09-25 20:22:14

line-height:335px; 
Вы можете попробовать это...