Как сделать так, чтобы текст не занимал более 1 строки?

332

Есть ли перенос слов или любой другой атрибут, который мешает переносу текста? У меня есть высота и overflow:hidden, и текст все еще ломается.

Должен работать во всех браузерах, до CSS3.

— Isherwood
источник

632

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

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

Развернуть фрагмент

Примечание: это работает только для элементов блока. Если вам нужно сделать это с ячейками таблицы (например), вам нужно поместить div внутри ячейки таблицы, так как ячейки таблицы имеют отображаемую ячейку таблицы, а не блок.

Начиная с CSS3, это поддерживается и для ячеек таблицы.

— Клетус
источник

12

бело-пространство! Это то, что я искал ... 1000 спасибо ... это невозможно гуглить!

2

Существует также собственный атрибут ie, называемый word-wrap (IIRC) ... глупый IE.

— борозда

21

Также рассмотрите "переполнение текста: многоточие;" Он добавляет ... в конце вашего текста, если он выходит за пределы ширины вашего контейнера

— Дрю Ландграф

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

Иногда использование  вместо пробелов будет работать. Очевидно, что у него есть недостатки.

— Гроссфогель
источник

К сожалению, я не могу сделать это в таких обстоятельствах

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>

(простите встроенные стили)

— Дункан Джонс
источник