2009-02-21 3 views

ответ

451

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

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

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

+7

white-space! Это то, что я искал ... 1,000 спасибо ... это невозможно для Google! – 2009-02-21 05:06:04

+2

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

+12

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

4

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

+0

К сожалению, я не могу этого сделать – 2009-02-21 05:02:26

11

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

<style type="text/css"> 
    div { 
     white-space: nowrap; 
     overflow: hidden; 
text-overflow: ellipsis; 
    } 
    </style> 
Смежные вопросы