2012-05-18 6 views
6

Tengo tal vez una tarea un poco extraña, pero creo que no hay mejor solución. Necesito tener <ul> en algún contenedor cuyo ancho sea cambiable y con elementos <li> en línea de ancho fijo. Debería (y ya encontré la solución) poner espacios entre <li> elems del mismo ancho. El ancho de los espacios cambia dinámicamente y depende del ancho del contenedor parental. Nuevamente, estos artículos <li> tienen ancho fijo.Forma de CSS para restringir el salto de línea para texto

También debo colocar algunos enlaces encima de estos elementos descritos. Por alguna razón, los enlaces deben estar en otro elemento <ul>. También envolvieron en elens <li> en línea. Y quiero que se coloquen justo encima de los artículos <li> descritos. Esto se puede hacer configurando el ancho fijo de <li> elementos como se indicó anteriormente. Ahora, el problema es que el texto en cada enlace tiene un ancho diferente y se dividirá en dos líneas, pero debo ubicarlo en una línea.

Así que quiero engañar al navegador: el texto se desbordará <li> elementos.

.liElem { 
    width: 100px; 
    height: 20px; 
    overflow: visible; 
} 

Pero, como se puede adivinar, el texto se está rompiendo en dos líneas y desbordante realidad la parte inferior de elementos de la lista, no el lado derecho.

El efecto que quería se puede hacer insertando &nbsp; insted de espacios en texto como este: <li><a href="#">Add&nbsp;to&nbsp;Favourites</a></li>.

Entonces, mi pregunta es esta: ¿cómo en modo css hacer que el texto habitual NO se divida en varias líneas?

+0

ha configurado el ancho: 100px; en su CSS, por lo que si el ancho de la línea es más de 100 píxeles, dividirá el texto en varias líneas, por lo que puede no ser necesario establecer el ancho. o puede usar el espacio en blanco: nowrap; propiedad. – Shreedhar

+0

Debo tener elementos de lista de ancho fijo. Como dije, quiero engañar al navegador, déjalo pensar que va a tener ancho de ancho de elementos de posición. –

Respuesta

8
.nobr { white-space:nowrap; } 
+0

Perfecto funciona para mí. ¡Muchas gracias! –

Cuestiones relacionadas