CSS: ограничить элемент до 1 строки

Question

Я хочу ограничить элемент отображением только 1 строки текста, оставшаяся часть скрыта (переполнение: скрыто), без установки определенной высоты. Это возможно только с помощью CSS?

Answer 1

Возможно:

element (white-space: nowrap; overflow: scroll;)

Текст, проанализированный как HTML или XML, разбит на токены, что означает, что все пробелы пропускаются в один пробел. Это означает, что у вас будет одна строка текста, если вы не укажете что-то в дополнение к объявлению переполнения, которое может привести к переносу текста.

РЕДАКТИРОВАТЬ: мне не удалось включить необходимое свойство write-space: nowrap, в противном случае по умолчанию контейнер будет прокручиваться вертикально, а не горизонтально.

Answer 2

p#foo {
    white-space:nowrap;
    overflow:hidden;
}

Answer 3

использовать блок отображения, чтобы он не выходил за пределы родительского элемента.

p#foo{
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}

Answer 4

Если вы хотите отключить перенос текста, используйте white-space: nowrap;.