CSS sin ajuste de texto

Consulte el código http://jsbin.com/eveqe3/edit, también citado a continuación.CSS sin ajuste de texto

Necesito mostrar el texto dentro de los divs del artículo de tal manera que el texto aparezca solo en el recuadro verde con el ancho especificado. El resto de la línea debe estar oculta. Cualquier sugerencia por favor ...

<style> 
    #container{ 
    width : 220px; 
    } 
    .item{ 
    float:left; 
    border: 1px solid #0a0; 
    width: 100px; 
    height: 12px; 
    padding 2px; 
    margin: 0px 2px; 
    } 
    .clearfix{ 
    clear: both; 
    } 
</style> 
</head> 
<body> 
    <div id="container"> 
    <div class="item"> A very loooooooooooooooooooooong text </div> 
    <div class="item"> Another looooooooooooooooooooong text </div> 
    <div class="clearfix"> </div> 
    </div> 
</body> 
</html>

Fuente

2010-07-22 Mithun Sreedharan

Como digo, si se establece su altura a 12 píxeles, con el acolchado de 2 píxeles que debe utilizar font-size: 10px por lo que el borde no no cubre la parte inferior de los personajes. Sin embargo, prefiero utilizar EM como una medida para que se adapte mejor a los cambios del usuario. –

Asegúrese de ver su resultado en todos los navegadores de destino ya que la fuente/tamaño difiere de manera predeterminada. –

Sure @Mark, gracias –

104

Adicionalmente a overflow: hidden, utilice

white-space:nowrap;

Fuente

2010-07-22 11:46:17

sí, este es lo que quiero! –

sólo tiene que utilizar:

overflow: hidden; 
white-space: nowrap;

En divs de su artículo

Fuente

2010-07-22 11:37:14 Macmade

Utilice la propiedad CSS desbordamiento. Por ejemplo:

.item{ 
    width : 100px; 
    overflow:hidden; 
    }

La propiedad de desbordamiento puede tener uno o más valores como (ocultos, desplazamiento, visibles) .. se puede controlar el desbordamiento del als en una única dirección utilizando desbordamiento-x o overflow-y.

Yo ho

Fuente

2010-07-22 11:38:41 dejavu

Consulte 'overflow: hidden' aplicado aquí jsbin.com/eveqe3/2/edit, la parte de la segunda línea es visible en el cuadro. ¿Es posible evitar que el texto entre en la siguiente línea? –

CSS sin ajuste de texto

Respuesta

Cuestiones relacionadas