¿Cómo puedo forzar que los contenidos div permanezcan en una línea con HTML y CSS?

Resuelto Misha Moroshko asked hace 13 años • 11 respuestas

Tengo un texto largo dentro de un divcon definidowidth :

HTML:

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

CSS:

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

¿Cómo podría forzar que la cadena permanezca en una línea (es decir, que se corte en medio de "Desbordamiento")?

Intenté usarlo overflow: hidden, pero no sirvió de nada.

Misha Moroshko avatar Mar 08 '11 19:03 Misha Moroshko
Aceptado

Prueba esto:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
Bazzz avatar Mar 08 '2011 12:03 Bazzz

uso white-space:nowrapyoverflow:hidden

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

anothershrubery avatar Mar 08 '2011 12:03 anothershrubery

En su sección CSS, use white-space: nowrap;.

Rob Agar avatar Mar 08 '2011 12:03 Rob Agar

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div>Stack Overflow is the BEST!!!</div>
Expandir fragmento

Bozlur Rahman avatar Oct 05 '2016 06:10 Bozlur Rahman

Hice un violín:

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

RobAgar señaló white-space:nowrap.

Un par de cosas aquí: las necesitas overflow: hiddensi no quieres ver caracteres adicionales asomando en tu diseño.

Además, como se mencionó, puede usar white-space: pre(ver EnderMB), teniendo en cuenta que preno colapsará los espacios en blanco, mientras que white-space: nowrapsí.

Marc Audet avatar Mar 08 '2011 13:03 Marc Audet