HTML + CSS: как заставить содержимое div оставаться в одной строке?

У меня есть длинный текст внутри divс определеннымwidth :

HTML:

<div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

Как я мог заставить строку оставаться в одной строке (то есть быть обрезанным в середине "Переполнения")?

Я пытался использовать overflow: hidden, но это не помогло.

Попробуй это:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Используйте white-space:nowrapиoverflow:hidden

http://jsfiddle.net/NXchy/8/

в вашем использовании CSS white-space:nowrap;

Ваш HTML код: <div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

Теперь результат должен быть:

Стек Сверх ...

Все прыгали на этом !!! Я тоже сделал скрипку

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar получает точку для указания в white-space:nowrapпервую очередь.

Здесь есть пара вещей, которые вам нужны, overflow: hiddenесли вы не хотите, чтобы дополнительные символы высовывались в ваш макет.

Кроме того, как уже упоминалось, вы могли бы использовать white-space: pre(см. EnderMB), помня, что preне будет разрушать пробелы, тогда как white-space: nowrapбудет.

Дайте это попробовать. Он использует, preа не так, nowrapкак я предполагаю, вы захотите, чтобы это <pre>работало аналогично, но любой из них будет работать просто отлично:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space:pre;
}

http://jsfiddle.net/NXchy/11/

Я прыгнул сюда в поисках того же самого, но никто не работал для меня.

Есть случаи, когда независимо от того, что вы делаете, и в зависимости от системы (Oracle Designer: Oracle 11g - PL / SQL), div всегда будет переходить на следующую строку, и в этом случае вы должны использовать тег span вместо этого.

Это творило чудеса для меня.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

добавь это в свой div

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

div {
    display: flex;
    flex-direction: row; 
}

было решение, которое работало для меня. В некоторых случаях с div-lists это необходимо.

некоторые альтернативные значения направления, row-reverse, column, column-reverse, unset, initial, inherit которые делают то, что вы ожидаете от них делать

Попробуйте установить высоту, чтобы блок не увеличивался, чтобы вместить ваш текст, и сохраните overflow: hiddenпараметр

РЕДАКТИРОВАТЬ: Вот пример того, что вы могли бы, если вам нужно отображать 2 строки в высоту:

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}