html - retorno - ¿Cómo evito los saltos de línea entre un botón de radio y su etiqueta, mientras sigo permitiendo saltos de línea dentro de la etiqueta misma?
salto de linea html sin br (4)
Si no te importa el marcado menos ordenado, puedes obtener lo que quieres simplemente eliminando el espacio en blanco entre el texto <input> y <label> .
<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 de <input> s por sugerencia de JacobM).
Si desea un poco de espacio entre la <input> y el primer carácter de la etiqueta, use una entidad de espacio sin interrupción ( ).
Me gustaría asegurarme de que nunca haya un salto de línea entre un botón de opción y el comienzo de su etiqueta adyacente. Sin embargo, quiero que el texto dentro de la etiqueta se pueda envolver. es posible? Puede ver mis intentos fallidos al presentar el siguiente HTML:
<html>
<head>
<style type="text/css">
.box {
border: solid gray 2px;
width: 200px;
margin: 5px;
}
.chopped {
overflow: hidden;
}
</style>
</head>
<body>
Las casillas necesitan ser de ancho fijo, por lo que el contenido largo debe ser envuelto, como se ve en el primer cuadro a continuación. Y si alguien intenta publicar una cadena ridículamente larga sin espacios, necesitamos que se trunque, 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/>
Así que agregué "overflow: hidden", y las cosas son algo mejores, pero todavía no me gusta cómo 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 agrego <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 (la que tiene espacios), ya que ya no se ajusta:
<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>
has probado white-space: nowrap; dentro de tu definición .chopped?
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, agrega el siguiente estilo a tu CSS:
label {
white-space:nowrap;
}
.wrappable {
white-space:normal;
}
El estilo de espacio en blanco en la etiqueta evita el salto de línea entre el botón de opción y el texto, y el espacio alrededor del texto permite que se ajuste justo dentro del texto.
La solución proporcionada 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
Por lo tanto, 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>
PD: mi situación era un elemento <input /> en línea al envolver 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.