nbsp - Cómo insertar saltos de línea en documentos HTML utilizando CSS

salto de linea html/n

Question

Estoy escribiendo un servicio web y quiero devolver los datos como XHTML. Debido a que se trata de datos, no de marcas, quiero mantenerlo muy limpio, sin <div> so <span> adicionales. Sin embargo, para comodidad de los desarrolladores, también me gustaría que los datos devueltos sean razonablemente legibles en un navegador. Para hacerlo, estoy pensando que una buena forma de hacerlo sería usar CSS.

Lo que específicamente quiero hacer es insertar saltos de línea en ciertos lugares. Soy consciente de display: block, pero realmente no funciona en la situación que trato de manejar ahora - un formulario con campos <input>. Algo como esto:

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

Me gustaría que se renderice para que cada etiqueta se muestre en la misma línea que el campo de entrada correspondiente. He intentado esto:

input.a:after { content: "/a" }

Pero eso no pareció hacer nada.

Answer 1

El elemento claro de CSS es probablemente lo que estás buscando para obtener los saltos de línea. Algo a lo largo:

#login form input {clear: both; }

se asegurará de que no queden otros elementos flotantes a cada lado de los campos de entrada.

Referencia

Answer 2

Estoy de acuerdo con John Millikin. Puede agregar etiquetas <span> o algo alrededor de cada línea con una clase CSS definida, luego hacer que muestren: bloquee si es necesario. La única otra forma en que puedo pensar para hacer esto es hacer que la <input> un bloque en línea y hacer que emitan un relleno "muy grande", lo que haría que el contenido en línea se reduzca.

Aun así, su mejor opción es agrupar lógicamente los datos en etiquetas <span> (o similares) para indicar que los datos pertenecen juntos (y luego dejar que el CSS haga el posicionamiento).

Answer 3

Los navegadores controlan especialmente los controles de formularios, por lo que muchas cosas no funcionan necesariamente como deberían. Una de estas cosas es el contenido generado; no funciona para los controles de formulario. En su lugar, envuelva las etiquetas en <label> y use label:before { content: ''/a'' ; white-space: pre; } label:before { content: ''/a'' ; white-space: pre; } label:before { content: ''/a'' ; white-space: pre; } . También puedes hacerlo flotando todo y añadiendo clear: left a los elementos <label> .

Answer 4

Parece que tienes muchos elementos de formulario que te gustaría mostrar en una lista, ¿verdad? Hmm ... si solo esos tipos de especificaciones de HTML hubieran pensado incluir el marcado para manejar una lista de elementos ...

Te recomiendo que lo configures así:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

Entonces el CSS se vuelve mucho más fácil.

Answer 5

Use javascript Si está utilizando la biblioteca jQuery, intente algo como esto:

$("input.a").after("<br/>")

O lo que sea que necesites

Answer 6

<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

y el siguiente css

form label { display: block; }

Answer 7

<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>

Answer 8

Las opciones de javascript complican las cosas por completo. Haz lo que Jon Galloway o daniels0xff sugirieron.

Answer 9

Una opción es especificar una plantilla XSLT dentro de su XML que (algunos) navegadores procesarán permitiéndole incluir presentaciones con marcación, CSS, colores, etc. que no deberían afectar a los consumidores del servicio web.

Una vez en XHTML, simplemente podría agregar algo de relleno alrededor de los elementos con CSS, por ejemplo

form input.a {margin-bottom: 1em}

Answer 10

El secreto es rodear toda tu cosita, etiqueta y artilugio, en un lapso cuya clase sea el bloque y clara:

<style type="text/css">
.lb {
display:block;clear:both;
}
</style>

<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>

Answer 11

Lo mejor sería envolver todos sus elementos en elementos de etiqueta, luego aplicar css a las etiquetas. Las pseudo clases: before y: after no son completamente compatibles de forma consistente.

Las etiquetas de etiqueta tienen muchas ventajas, incluido un mayor acceso (en múltiples niveles) y más.

<label>
    Thingy one: <input type="text" name="one">;
</label>

luego usa CSS en los elementos de tu etiqueta ...

label {display:block;clear:both;}

Answer 12

lo siguiente le daría las nuevas líneas. También pondría espacios adicionales en frente ... tendrías que estropear tu sangría de origen al quitar la tabulación.

form { white-space: pre }