Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Texto cortado

Estas en el tema de Texto cortado en el foro de CSS en Foros del Web. Buenas, Tengo un div de un ancho concreto. Dentro de este div quiero escribir 4 lineas de información. Me gustaría que cuando el contenido de ...
  #1 (permalink)  
Antiguo 30/01/2015, 11:46
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 547
Antigüedad: 17 años, 11 meses
Puntos: 4
Texto cortado

Buenas,
Tengo un div de un ancho concreto.
Dentro de este div quiero escribir 4 lineas de información. Me gustaría que cuando el contenido de una linea supere el ancho del div no generara otra linia, sinó que deje de visualizarse.
He intentado con el overflow:hidden, pero no me ha funcionado.

Alguna idea? Gracias.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #2 (permalink)  
Antiguo 30/01/2015, 13:08
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Texto cortado

¿Cuatro lineas o una linea?
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #3 (permalink)  
Antiguo 30/01/2015, 14:00
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 547
Antigüedad: 17 años, 11 meses
Puntos: 4
Respuesta: Texto cortado

Gracias pzin por el interés.
Una imagen vale más que mil palabras.
La siguiente imagen muestra el div con las 4 líneas:



Y el código html del div es este:

Código HTML:
Ver original
  1. <div class="textBox">
  2.                         <h2>CERDANYOLA DEL VALLES, Sant Ramon</h2>
  3.                         <p class="text">Pis&nbsp; 79 m&sup2; | 4 Hab.</p>
  4.                         <p class="text"><strong>Ref: 08002 | Pis en venda</strong></p>
  5.                         <div class="btFicha">
  6.                             <a href="pisos-cases/venda/pis-en-cerdanyola-del-valles-08002.html">
  7.                                 VENDA <span>119.600 €</span>                            </a>
  8.                         </div>
  9.                     </div>

Lo que quiero, es que el texto de <h2> no cree una segunda linea si no cabe, o sea que si sólo cabe "CERDANYOLA DEL VALLES, Sant" pues sólo visualice esto.

Gracias.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #4 (permalink)  
Antiguo 30/01/2015, 16:31
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Texto cortado

Entonces algo así te vale:

Código CSS:
Ver original
  1. h2 {
  2.   white-space: nowrap;
  3.   overflow: hidden;
  4. }

Y si le añades un text-overflow: ellipsis; te añade unos puntos suspensivos en caso de que oculte texto.
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.

Etiquetas: cortado
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 17:49.