La altura de línea no funcionará

Tengo un problema que me está molestando. La altura de la línea parece estar basada en la herencia de un tamaño de fuente anterior.

El código dentro del div "textruta" es generado por CKeditor, por lo tanto, un montón de código basura.

EDIT:

Aquí está el código:

<!DOCTYPE html>
<head>
  <meta charset="iso-8859-1">
  <title> timesheets.js :: Slideshow Engine </title>

<link href='http://fonts.googleapis.com/css?family=Frijole' rel='stylesheet' type='text/css'>
<style>

* {
margin: 0;
padding: 0;
}
body {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 28px;
}
</style>
<div id="textruta" class="textruta" style="width: 280px; height: 116px; position: absolute; top: 100px; left: 120px; visibility: visible;">
<span id="previewtext1">
<p>
<span style="font-size:28px">
    <span style="font-family:frijole">
        <span style="background-color:#FFFF00">Hello There!</span>
    </span>
<br><br>
    <span style="font-size:18px">
        <span style="font-size:26px">
            <span style="color:#FFFFFF"><span style="background-color:#FF0000">123:-</span>
         <br><span style="font-size:18px"><em><span style="background-color:#FF0000">(234:-)</span></em>
         </span>
     </span>
     </span>
     </span>
     </span>
</p>
</span>
</div>

</body>
</html>

El resultado:

enter image description here

Resultado deseado:

enter image description here

¿Alguna idea?

Aquí hay un enlace a la página de prueba.

preguntado el 11 de septiembre de 13 a las 14:09

elimine br pero no creo que para este diseño tenga el código html adecuado aquí. 1. Eliminar br 2. Aumentar la altura de div como altura: 125px; Esto podría parecerse a la salida que está buscando:

Ahora anOG.. Lo siento. Primera y última vez que hago esto. -

5 Respuestas

Tienes un código de aspecto serio aquí:

<div id="textruta" class="textruta" 
     style="padding:10px; height:116px; text-align: left; 
            left:160px; top:100px; width:280px;">
    <p>
    <span style="font-size:28px">
    <span style="font-family:frijole">
    <span style="background-color:#FFFF00">
      Hello There!
    </span>
    </span>
        <br></br>
        <br></br>
    <span style="font-size:18px"><span style="font-size:26px">
    <span style="color:#FFFFFF"><span style="background-color:#FF0000">
      123:-
    </span>
    <br></br>
    <span style="font-size:18px">
    <em>
    <span style="background-color:#FF0000">
      (234:-)
    </span>
    </em>
        </span>
        </span>
        </span>
        </span>
        </span>
    </p>
</div>

Verá estos saltos de línea codificados: <br><br>, esa es probablemente la causa del espacio en blanco adicional.

Debes estar usando algún tipo de editor WYSISWG para generar estas cosas, ¡es bastante increíble!

Respondido el 11 de Septiembre de 13 a las 14:09

Sí, lo sé, hay mucho código basura :) Es generado por CKEDITOR. Incluso después de quitar el , el espacio entre 123:- y (234:-) es demasiado largo - Pegajoso

Hay tantos intervalos anidados y tamaños de fuente que es difícil saber por dónde empezar. Es posible que primero tenga que ir a la vista de código y limpiar este material; de lo contrario, ajustar la altura de la línea puede no ser de ayuda. - marc audet

¡Extraño!

Lo resolví cambiando la cabeza:

<!DOCTYPE html>

Dentro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

¿Alguien sabe por qué? :)

Respondido el 11 de Septiembre de 13 a las 15:09

Intenta hacer esto:

.hellomessage {
margin-bottom: -20px;
}

y está bien, lo hice y el código es un poco largo

espero que esto ayude :)

Respondido el 11 de Septiembre de 13 a las 14:09

sí el
el elemento html crea espacio adicional, si puede salir de html o puede eliminar el elemento en css

br {
  display: none;
}

pero no es recomendable hacerlo.

Respondido el 11 de Septiembre de 13 a las 14:09

En primer lugar, (semántica aquí). Configure su textruta div/class para desbordarse oculto. No quieres que nada de lo que debe estar dentro del contenedor esté afuera, ¿verdad? Así que ese es un buen comienzo.

No prefiero la altura de línea para su método, pero no sé exactamente qué está tratando de hacer.

De todos modos, si establece la altura de línea de los párrafos superiores en algún tipo de porcentaje ... (que puede haber sido su error, tal vez lo configuró en el lugar equivocado o no usó los porcentajes). Funciona perfectamente bien. Como tal:

.textruta{
  overflow: hidden;
}
.textruta > p{
  line-height: 80%;
}

Respondido el 11 de Septiembre de 13 a las 14:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.