<span> sangría texto envuelto

Así que estoy simulando un diseño de tabla con un div y un par de tramos dentro de él. Me gustaría el lapso a la derecha para sangrar cualquier texto que se envuelva. Intenté algunas cosas y no puedo hacer que funcione. Cualquier ayuda sería apreciada.<span> sangría texto envuelto

jsFiddle: http://jsfiddle.net/2Wbuv/

HTML

<div class="display-element"> 
    <span class="display-label">Field 1</span> 
    <span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span> 
</div> 
<div class="display-element"> 
    <span class="display-label">Field 2</span> 
    <span class="display-field">This is another string of data.</span> 
</div>

CSS

.display-element  {} 

.display-label   {display: inline-block; 
         width: 100px; 
         padding-left: 5px;} 

.display-field   {display: inline;}

Fuente

2011-10-03 Scott Beeson

¿Por qué no usar 'display: table-cell'? – sdleihssirhc

Umm, genio ... Nunca he usado eso antes y ahora no tengo idea por qué. Por favor responde para que pueda darte puntos. –

Oh, excepto que ahora no puedo hacerlo al 100% de ancho ... todavía estoy trabajando en ello. –

mira esto: http://jsfiddle.net/2Wbuv/2/

.display-element { 
 
} 
 

 
.display-label { 
 
    display: inline-block; 
 
    width: 100px; 
 
    padding-left: 5px; 
 
} 
 

 
.display-field { 
 
    display: inline-block; 
 
    padding-left: 50px; 
 
    text-indent: -50px; 
 
    vertical-align: top; 
 
    width: 200px; /* for testing purposes only */ 
 
}

<div class="display-element"> 
 
    <span class="display-label">Field 1</span> 
 
    <span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span> 
 
</div> 
 
<div class="display-element"> 
 
    <span class="display-label">Field 2</span> 
 
    <span class="display-field">This is another string of data.</span> 
 
</div>

Fuente

2011-10-03 18:20:17 simshaun

El problema con esto (hacer que ambos sean bloques en línea) es que pone la primera línea en la línea siguiente. Quita el ancho del segundo tramo y verás lo que quiero decir (o simplemente haz su ventana de menos de 300 píxeles de ancho). –

Si no le das a '.display-field' un ancho fijo, que también requiere el cambio de línea en bloque en línea, ya que es un elemento span, necesitas hacer que emule una celda de tabla usando el navegador no cruzado -compatible 'display: table-cell'. Alternativamente, y esta es la forma en que iría, use una tabla real. – simshaun

Parece que desea una sangría francesa. CSS algo como esto debe hacer el truco:

.hanging-indent 
{ 
    text-indent : -3em ; 
    margin-left : 3em ; 
}

Pero desde su <span> es un elemento en línea, la propiedad text-guión, así como otras propiedades CSS que pertenecen a un bloque, no tiene sentido.

Fuente

2011-10-03 18:28:25

El CSS 3 draft specifies a hanging indent. Si es compatible con los navegadores, lo siguiente debe funcionar:

.hanging-indent 
{ 
    text-indent: 3em hanging each-line; 
}

Desafortunadamente ni hanging ni each-line valores son currently supported in modern browsers como la especificación de CSS Text Module Level 3 es todavía un borrador.

La característica se implementa con un prefijo específico del navegador para WebKit y Chromium. Para Firefox there is an open Bug you may vote on.

Fuente

2015-04-21 05:55:43

Respuesta

Cuestiones relacionadas