Як не допустити, щоб текст займав більше 1-го рядка?

332

Чи є обгортання слів або будь-який інший атрибут, який перешкоджає загортанню тексту? У мене висота, і overflow:hidden, і текст все одно ламається.

Потрібно працювати у всіх браузерах, перш ніж CSS3.

— ізервуд
джерело

631

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

Розгорніть фрагмент

Примітка. Це працює лише на блокових елементах. Якщо вам потрібно зробити це для комірок таблиці (наприклад), вам потрібно поставити div всередині комірки таблиці, оскільки комірки таблиці не мають блокування.

Як і для CSS3, це підтримується і для комірок таблиці.

— клетус
джерело

12

пробіл! Це те, що я шукав ... 1000 подяк ... це неможливо в Google!

2

Також є власний атрибут, який називається word-wrap (IIRC) ... дурний IE.

— гарро

21

Також врахуйте "переповнення тексту: еліпсис;" Він додає ... в кінці тексту, якщо він виходить за межі ширини вашого контейнера

— Дрю Landgrave

1

Я думаю, що коментар "це працює лише на елементах блоку" є правильним. Якщо ви спробуєте це в якорі, абзаці, заголовку тощо, це не працює. Вам потрібно зробити щось на кшталтp.oneline { white-space:nowrap; overflow:hidden; display:block;}

— Алекс Анжеліко

Остерігайтеся приховування переливу; це означає бізнес.

— Девід А. Сірий

57

Ви можете використовувати CSS white-space Propertyдля досягнення цього.

white-space: nowrap

— Роберт К. Барт
джерело

36

Використання еліпсису додасть ... нарешті.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

— Вівек
джерело

4

Іноді використання  замість пробілів спрацює. Зрозуміло, він має і недоліки.

— grossvogel
джерело

На жаль, я не можу це зробити за таких обставин

2

Просто, щоб бути чітко зрозумілим, це добре працює з абзацами та заголовками тощо. Вам просто потрібно вказати display: block .

Наприклад:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(пробачте стилі вбудованих)

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