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

Question

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

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

HTML:

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

CSS:

div {

    border: 1px solid black;

    width: 70px;

}

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

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

429 10

html css

10 ответов:

Comments

Ничего не найдено.

Bazzz · Accepted Answer · 2011-03-08 14:20:32

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

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

anothershrubery · Accepted Answer · 2011-03-08 14:21:22

использовать white-space:nowrap и overflow:hidden

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

Rob Agar · Accepted Answer · 2013-08-20 16:28:07

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

Marc Audet · Accepted Answer · 2011-03-08 15:15:47

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

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

Робагар получает очко за указание white-space:nowrap первый.

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

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

bozlur rahman · Accepted Answer · 2016-10-05 09:37:31

HTML-код: <div>Stack Overflow is the BEST !!!</div>

CSS:
div {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
Теперь результат должен быть:
Stack Overf...

stephenmurdoch · Accepted Answer · 2011-03-08 14:19:35

добавьте это в свой div
white-space: nowrap;
http://jsfiddle.net/NXchy/1/

Mike B · Accepted Answer · 2011-03-08 14:23:28

дайте это попробовать. Он использует pre, а не nowrap Как я предполагаю, вы хотели бы, чтобы это работало аналогично <pre> но либо будет работать нормально:
div {
    border: 1px solid black;
    max-width: 70px;
    white-space:pre;
}
http://jsfiddle.net/NXchy/11/

Dököll · Accepted Answer · 2013-08-20 16:26:24

Я вскочил, вот ищу то же самое, но никто не работал для меня.

есть случаи, когда независимо от того, что вы делаете, и в зависимости от системы (Oracle Designer: Oracle 11g - PL/SQL), divs всегда будет переходить к следующей строке, и в этом случае вы должны использовать тег 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>

Wouter Simons · Accepted Answer · 2011-03-08 14:27:52

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

EDIT: вот пример того, что вам может понравиться, если вам нужно отобразить 2 строки:
div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}

Pingger Shikkoken · Accepted Answer · 2018-08-04 21:48:13

div {
    display: flex;
    flex-direction: row; 
}
было решение, которое сработало для меня. В некоторых случаях с div-списки это необходимо.

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