¿Cómo evito los saltos de línea entre un botón de opción y su etiqueta, al tiempo que dejo los saltos de línea dentro de la etiqueta?

Me gustaría asegurarme de que nunca haya un salto de línea entre un botón de radio y el comienzo de su etiqueta adyacente. Sin embargo, deseo el texto dentro de la etiqueta que se permitirá envolver. es posible? Se puede ver mis intentos fallidos por hacer que el código HTML siguiente:¿Cómo evito los saltos de línea entre un botón de opción y su etiqueta, al tiempo que dejo los saltos de línea dentro de la etiqueta?

<html> 
<head> 
    <style type="text/css"> 
.box { 
    border: solid gray 2px; 
    width: 200px; 
    margin: 5px; 
} 
.chopped { 
    overflow: hidden; 
} 
    </style> 
</head> 
<body>

Las cajas deben ser de ancho fijo, por lo que necesita mucho contenido para ser envuelto, como se ve en el primer cuadro de abajo. Y si alguien trata de colocar una cadena ridículamente largo, sin espacios, lo necesitamos para ser truncado, en lugar de extenderse más allá del borde de la caja - el problema es visible en la segunda casilla:

<div class="box"> 
    <input type="radio"/> 
    <label>This is a really long string with no spaces</label> 
</div> 

<div class="box"> 
    <input type="radio"/> 
    <label>This_is_a_really_long_string_with_no_spaces</label> 
</div> 

<hr/>

Por lo tanto, añadir "overflow: hidden", y las cosas son un poco mejor, pero todavía no me gusta la forma en la segunda caja tiene un salto de línea entre el botón de radio y su etiqueta:

<div class="chopped box"> 
    <input type="radio"/> 
    <label>This is a really long string with no spaces</label> 
</div> 

<div class="chopped box"> 
    <input type="radio"/> 
    <label>This_is_a_really_long_string_with_no_spaces</label> 
</div> 

<hr/>

Si añado <nobr>, los botones de opción están al lado de sus etiquetas, por lo que la cadena sin espaciado ahora se ve perfecta. Sin embargo, esto rompe la primera cadena (el uno con espacios), puesto que ya no envuelve:

<div class="chopped box"> 
    <nobr> 
    <input type="radio"/> 
    <label>This is a really long string with no spaces</label> 
    </nobr> 
</div> 
<div class="chopped box"> 
    <nobr> 
    <input type="radio"/> 
    <label>This_is_a_really_long_string_with_no_spaces</label> 
    </nobr> 
</div> 

</body> 
</html>

Fuente

2009-02-04 mike

Primero, mueva los botones de radio dentro de sus etiquetas. Esto agrega la característica agradable de que puede seleccionar los botones de opción haciendo clic en el texto. Luego agrega un lapso alrededor del texto.

<div class="chopped box"> 
<label> 
    <input type="radio"/> 
    <span class="wrappable">This is a really long string with no spaces</span> 
</label> 
</div> 

<div class="chopped box"> 
<label> 
    <input type="radio"/> 
    <span class="wrappable">This_is_a_really_long_string_with_no_spaces</span> 
</label> 
</div>

En segundo lugar, añadir el siguiente estilo a su css:

label { 
    white-space:nowrap; 
} 

.wrappable { 
    white-space:normal; 
}

El estilo de espacio en blanco en la etiqueta impide que el salto de línea entre el botón de radio y el texto, y la duración de todo el texto permite para envolver solo dentro del texto.

Fuente

2009-02-04 18:55:14

Esto también podría cambiarse al revés: use div.radioinput donde está la etiqueta y use la etiqueta en lugar de span.wrappable. –

Oh, claro, y eso podría tener un sentido más semántico en términos de que la etiqueta es el envoltorio alrededor del texto, pero luego pierdes la característica "clic en el texto de la etiqueta para seleccionar el botón de radio" (puedes volver a obtener esa función dando al botón de radio una identificación y usando "para" en la etiqueta). –

Puede tener la función de seleccionar el botón radion haciendo clic en la etiqueta más fácilmente definiendo una etiqueta * para * una identificación, por ejemplo etiqueta para = "ID_de_radio_button" – 0x4a6f4672

has necesitado white-space: nowrap; dentro de tu definición .chopped?

Fuente

2009-02-04 18:54:01 bendewey

Putting white-space: nowrap en todo el div hará que el string realmente largo que tiene espacios en él deje de envolver. –

Si no le importa el marcado menos ordenado, puede obtener lo que desea simplemente eliminando el espacio en blanco entre el <input> y <label> de texto.

<div class="chopped box"> 
    <label><input type="radio"/>This is a really long string with no spaces</label> 
</div> 

<div class="chopped box"> 
    <label><input type="radio"/>This_is_a_really_long_string_with_no_spaces</label> 
</div>

(<label> s colocados alrededor <input> s por sugerencia de JacobM.)

Si quieres un poco de espacio entre el <input> y el primer carácter de la etiqueta, utilice un espacio de no separación ( ) entidad.

Fuente

2009-02-04 19:11:56

La solución provista por JacobM es para este caso especial, por supuesto, la mejor solución. Pero este problema va más allá de solo algunos botones de radio con sus etiquetas. Mi solución en general:

In line text blabla <span style="white-space: normal;"><element /></span> blabla

Así como una solución para este caso específico, el resultado sería:

<label> 
    <span style="white-space: normal;"> 
     <input type="radio" /> 
    </span> 
    This_is_a_really_long_string_with_no_spaces 
</label>

PS: Mi situación era una línea <input /> elemento de ajustar el texto. El problema era que rompería la línea después del elemento en lugar del texto al final de la línea.Fue realmente difícil buscar este problema usando un motor de búsqueda, espero que esto ayude a otros.

Fuente

2012-04-13 20:54:30 Yeti

¿Cómo evito los saltos de línea entre un botón de opción y su etiqueta, al tiempo que dejo los saltos de línea dentro de la etiqueta?

Respuesta

Cuestiones relacionadas