¿Cómo puedo forzar que los contenidos div permanezcan en una línea con HTML y CSS?
Tengo un texto largo dentro de un div
con 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.
Aceptado
Prueba esto:
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
uso white-space:nowrap
yoverflow:hidden
http://jsfiddle.net/NXchy/8/
En su sección CSS, use white-space: nowrap;
.
div {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>Stack Overflow is the BEST!!!</div>
Expandir fragmento
Hice un violín:
http://jsfiddle.net/audetwebdesign/kh4aR/
RobAgar señaló white-space:nowrap
.
Un par de cosas aquí: las necesitas overflow: hidden
si 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 pre
no colapsará los espacios en blanco, mientras que white-space: nowrap
sí.