Foros del Web » Creando para Internet » Diseño web »

[SOLUCIONADO] CSS problema interlineado

Estas en el tema de CSS problema interlineado en el foro de Diseño web en Foros del Web. Hola tengo un problema y no logro resolver, cuando en un parrafo el texto exede el ancho de la DIV continua en la linea siguiente ...
  #1 (permalink)  
Antiguo 15/01/2016, 11:59
Avatar de demoche  
Fecha de Ingreso: junio-2006
Mensajes: 124
Antigüedad: 18 años, 5 meses
Puntos: 0
Pregunta CSS problema interlineado

Hola tengo un problema y no logro resolver, cuando en un parrafo el texto exede el ancho de la DIV continua en la linea siguiente pero no respeta ningun interlineado, queda pegado a la linea anterior, luego todo el parrafo sigue perfecto.

Mi css de la dive que contiene dicho texto es este:
Código:
.wrap-lyric{
	font-family:Arial, Helvetica, Sans-Serif;
	color:#000;
	font-size:12px;
	line-height:10px;
	vertical-align:baseline;
	list-style:none;
	text-decoration:none;
	margin:0;
	padding:0;
	word-wrap: break-word;
	word-break: keep-all;
}
Gracias espero haber sido claro y que puedan ayudarme.
Saludos
  #2 (permalink)  
Antiguo 16/01/2016, 21:19
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 11 años
Puntos: 39
Respuesta: CSS problema interlineado

La verdad no entiendo a que te refieres con que no respeta la linea anterior. Puedes hacer un pequeño demo reproduciendo tu problema usando http://codepen.io
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #3 (permalink)  
Antiguo 16/01/2016, 22:37
Avatar de demoche  
Fecha de Ingreso: junio-2006
Mensajes: 124
Antigüedad: 18 años, 5 meses
Puntos: 0
Respuesta: CSS problema interlineado

Acá te dejo una captura de ejemplo para ser mas claro.


"Society..." correponde a la misma linea que se corta en la palabra "Information" pero en lugar de respetar el interlineado como cuando empieza la frase con "Slave..." continua abajo pero muy pegado.
Gracias
  #4 (permalink)  
Antiguo 17/01/2016, 11:54
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 11 años
Puntos: 39
Respuesta: CSS problema interlineado

Te falto colocar el código html, porque solo con css es muy difícil saber donde esta el error, por eso te decía que lo mejor es que hicieras un pen como este:

http://codepen.io/g3kdigital/pen/jWGJVw?editors=110

Trate de replicar el html para lograr el mismo efecto que muestras en la imagen y lo que hice fue algo así:

Código HTML:
Ver original
  1. <p>texto 1</p>
  2. <br>
  3. <p>texto 2</p>

y me toco añadir un ancho fijo de 550px para que se cortara el texto donde decías.

Pero en fin, lo 1ero: line-height es el que esta mal, normalmente (en párrafos) este debe ser mayor al tamaño de fuente del párrafo, lo normal sería: Font-size: X & Line-Height: 1.2X, ejemplo:

Código CSS:
Ver original
  1. font-size: 10 px;
  2. line-height: 12px;
  3.  
  4. /*Aunque a mi me gusta usar em porque facilita la conversión*/
  5.  
  6. font-size: 20px;
  7. line-height: 1.2em; /*equivale a 24px*/

Pero no se sí te funcione porque no colocaste el html y estoy a ciegas tratando de reproducir tu error, en fin, espero haberte ayudado.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #5 (permalink)  
Antiguo 17/01/2016, 18:12
Avatar de demoche  
Fecha de Ingreso: junio-2006
Mensajes: 124
Antigüedad: 18 años, 5 meses
Puntos: 0
Respuesta: CSS problema interlineado

Gracias g3kdigital era eso al final "line-height: 1.2em;" yo lo habia probado darle un valor mayor que la Font-size en pixeles pero no me funciono, ahora si.
Muchas gracias por tu ayuda!
Abrazos

Etiquetas: interlineado, notepad++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:35.