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;на діві.

— Septnuits
джерело

Але тоді еліпсис не відображається, якщо текст виходить за межі вказаного виміру. stackoverflow.com/questions/26342411/…

— SearchForKnowledge

Це працює, чудово. Але мені потрібно, ...якщо є більше символів для показу, тому що коли довжина рядка довга, і це виходить із написаного діва.

— Мошій

Це діє дивно, якщо прихований текст містить гіперпосилання. Якби я перейшов на сторінку, це призвело б до того, що посилання в прихованому тексті прокручується на екран, коли воно має бути прихованим.

— Ерік

76

Якщо ви хочете вказати, що в цьому розділі доступно більше вмісту, можливо, ви захочете показати "еліпсис":

text-overflow: ellipsis;

Це має бути додатково до white-space: nowrap;запропонованих Septnuits.

Також переконайтеся, що ви зареєстрували цей потік, щоб обробити цю проблему у Firefox.

— Мулі
джерело

47

Я вважаю , що ви повинні використовувати text-overflow: ellipsis;з overflow: hidden;і white-space: nowrap;змусити його працювати

— Francisco Costa

caniuse.com/#feat=text-overflow aka. так, ти можеш. Подумайте, як весь вміст помістити в атрибут заголовка, щоб користувач все ще мав доступ до нього.

— DanMan

шахта просто показує в одному рядку і не заповнювати DIV перед показом трьох крапок ... stackoverflow.com/questions/26342411 / ... ( jsfiddle.net/ofrj55j4/20 )

— SearchForKnowledge

43

Ви можете використовувати цей код css:

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

Текст переповнення власності в CSS розглядаються ситуації , коли текст обрізається , якщо воно переповнює бокс елемента. Він може бути вирізаний (тобто відрізаний, прихований), відображати еліпсис ('...', значення діапазону Unicode U + 2026).

Зауважте, що переповнення тексту відбувається лише тоді, коли властивість переповнення контейнера має значення прихованого , прокрутки або автоматичного та пробілу: nowrap; .

Переповнення тексту може відбуватися лише на елементах рівня або блоку вбудованого блоку , тому що для переповнення елемента необхідно мати ширину. Переповнення відбувається в напрямку, визначеному властивістю напряму або пов'язаними атрибутами.

— Гаурав Трипаті
джерело

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;

Визначте також ширину для встановлення переповнення в одному рядку

— Jaydeep Kataria
джерело

-2

У мене була та сама проблема, і я вирішив її, використовуючи:

display: inline-block;

на divпитання.

— Деколну
джерело