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
источник