style - etiquetas html

¿Puede aplicar CSS solo en el texto que está envuelto, es decir, la segunda línea y las siguientes?

Question

Quiero poner un margin-left solo en el texto que está envuelto, es decir, texto después de la primera línea:

This is text with no margin left
     this text has margin left

Ejemplo

clic para ver

La entrada y la etiqueta están en 1 div y el texto está envuelto en la segunda línea, que es lo que quiero
pero es posible tener como un margen dejado solo en el texto que está envuelto en la segunda línea

jsfiddle ejemplo de mi problema

Answer 1

No, pero puede aplicar CSS a la primera línea, por lo que podría revertir su pensamiento para lograr el mismo efecto.

Algo como esto:

.mytext {margin-left:-5em;}
.mytext:first-line {margin-left:0;}

Aquí hay un ejemplo de JSFiddle que funciona: http://jsfiddle.net/4ckxJ/3/

Consulte http://www.quirksmode.org/css/firstline.html para obtener más información sobre :first-line pseudo-clase de :first-line .

Answer 2

Podría ajustar la línea que desea envolver en un span y aplicar:

display: block;
margin-left: 12px;

Dando display: block lo hará envolver en una nueva línea y el margen lo empujará hacia la derecha.

Answer 3

Sí, más o menos, sugeriría combinar padding-left y text-indent :

HTML

<div class="test">
    <label for="2question1">
        <input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> Very long text which is wrapped on the next line
    </label><br>

    <label for="2question2">
        <input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> Merknaam 2
    </label><br>

    <label for="2question3">
        <input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> Merknaam 3
    </label><br>

    <label for="2question4">
        <input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> Merknaam 4
    </label><br>
</div>

CSS

.test {
    width:200px;
}

.test label {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
}

text-indent aplica solo a la primera línea de texto en un elemento de nivel de bloque, por lo que debe lograr lo que desea.

Ver http://jsfiddle.net/pauldwaite/qUvvv/

Answer 4

Según su ejemplo actualizado, aquí hay un tenedor JSFiddle

haga flotar la entrada y luego haga que la etiqueta se bloquee de manera que quede justo al lado de ella - el espacio creado con el relleno y el margen, overflow:hidden hace que el texto "no se ajuste", entonces es posible que también desee eliminar las br ''s de su HTML