Texto que sobresale un div

jokings80 · #1 (**permalink**) 15/08/2012, 02:01

Hola,

Tengo un div donde se va mostrando texto de forma dinámica y quiero que cuando ese texto sea más largo que el tamaño del div se corte. Que no se vaya a una segunda línea ni sobresalga del div ni nada de eso. Usando

.estiloDiv {
width: 150px;
height: 25px;
overflow: hidden;
display: block;
}

se soluciona para Internet Explorer en todos los casos, y para Mozilla y Chrome en la mayoría. Sin embargo, cuando la primera palabra del texto es más grande que el tamaño del div, en Mozilla y Chrome no se muestra nada. El div aparece vacío.

¿Alguna idea de cómo podría hacerse para que se comportara igual que en Explorar, es decir, si la primera palabra es más grande que el tamaño del div, se muestre el texto que quepa en el div y se corte el resto de la palabra?

Gracias por la ayuda!!

emprear · #2 (**permalink**) 15/08/2012, 11:50

A mi no me aparece vacio en ningún navegador, aqui te dejo una modificación, notá que Loremipsumdolorsitamet supera el ancho del div

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.estiloDiv {
 width: 150px;
 height: 55px;
 overflow: hidden;
 white-space:nowrap; 
 }
/*]]>*/
</style>
</head>
<body>
<div class="estiloDiv">
Lorem ipsum dolor sit amet, tharsi nuntiatur hoc ait est cum
</div>
<div class="estiloDiv">
Loremipsumdolorsitamet, tharsi nuntiatur hoc ait est cum<br />
Lorem ipsum dolor sit amet, tharsi nuntiatur hoc ait est cum
</div>
</body>
</html>

Saludos

furoya · #3 (**permalink**) 15/08/2012, 12:06

Eso no debería pasar, pero si no pones un ejemplo que podamos probar va a ser difícil saber dónde está el problema, puede ser un bug, o una cuestión del contenido que le metes al div.

Acá hay una discusión que no sé si te servirá, porque creo que el asunto es justamente al revés, pero dale una leída por si alguno de los trucos te llega a servir para algo.

texto que sobrepasa div

Trata de experimentar achicando la fuente o agrandando la caja, cambiando el overflow, y ve qué sucede. Tal vez descubras la línea que falla.

jokings80 · #4 (**permalink**) 19/08/2012, 11:37

Hola,

El problema era que no usaba "white-space:nowrap; ". Incluyéndolo, se comporta como buscaba.

Muchas gracias por la ayuda!! :D