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), діви завжди переходитимуть до наступного рядка, і в цьому випадку вам слід використовувати тег 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>

додайте це до свого діву

white-space: nowrap;

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

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

було рішенням, яке працювало на мене. У деяких випадках з div-лістами це потрібно.

деякі альтернативні значення напряму - це те, row-reverse, column, column-reverse, unset, initial, inherit що робить те, що ви очікуєте від них

Спробуйте встановити висоту, щоб блок не міг зростати для розміщення тексту та зберегти overflow: hiddenпараметр

EDIT: Ось приклад того, що вам може сподобатися, якщо вам потрібно відображати 2 рядки у висоту:

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