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

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

HTML:

<div>Qaru is the BEST !!!</div>

CSS

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

Как я могу заставить строку оставаться в одной строке (т.е. срезаться в середине "Overflow" )?

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

Ответы

Ответ 1

Попробуйте следующее:

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

Ответ 3

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

Ответ 4

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

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

RobAgar сначала получает указание указать white-space:nowrap.

Несколько вещей здесь, вам нужно overflow: hidden, если вы не хотите видеть лишние символы, выкидывающиеся в ваш макет.

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

Ответ 5

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

CSS:

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

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

Stack Overf...

Ответ 7

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

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

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

Ответ 8

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

Существуют случаи, когда независимо от того, что вы делаете, и в зависимости от системы (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>

Ответ 9

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

EDIT: Вот пример того, что вам может понравиться, если вам нужно отобразить 2 строки:

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