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

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

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

+291
21 февр. '09 в 4:58
источник поделиться
5 ответов

div {
  white-space: nowrap;
  overflow: hidden;
}
<div>test that doesn't wrap</div>

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

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

+570
21 февр. '09 в 5:03
источник

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

white-space: nowrap
+49
21 февр. '09 в 5:04
источник

Использование эллипса добавит... в последний раз.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>
+26
07 апр. '17 в 10:54
источник

Иногда использование &nbsp; вместо пробелов будет работать. Ясно, что у этого есть недостатки.

+4
21 февр. '09 в 5:01
источник

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

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

+2
26 янв. '19 в 10:22
источник

Посмотрите другие вопросы по меткам или Задайте вопрос