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

Question

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

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

Answer 1

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

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

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

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

Answer 2

Вы можете использовать CSS white-space Property для достижения этого.

white-space: nowrap

Answer 3

Использование многоточия добавит ... в конце.

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

Answer 4

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

Answer 5

Просто чтобы быть кристально чистым, это прекрасно работает с абзацами, заголовками и т. Д. Вам просто нужно указать 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>

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