recortar texto demasiado largo dentro de div

85

<div style="display:inline-block;width:100px;">

very long text
</div>

cualquier forma de usar css puro para cortar el texto que es demasiado largo en lugar de mostrarse en la siguiente línea nueva y solo mostrar un máximo de 100px

html css

— cometa
fuente

56

<div class="crop">longlong longlong longlong longlong longlong longlong </div>

Este es un posible enfoque en el que puedo pensar

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}

De esta manera, el texto largo aún se ajustará pero no será visible debido a la overflowconfiguración, y al configurar lo line-heightmismo, heightnos aseguramos de que solo se muestre una línea.

Vea la demostración aquí y una bonita descripción de la propiedad de desbordamiento con ejemplos interactivos.

— Davor Lucic
fuente

1

No contaría con "line-height" para evitar el ajuste porque es posible que el usuario haya cambiado su configuración de fuente (para texto más pequeño) en el navegador. Del mismo modo, para las fuentes grandes, si ha fijado la altura del div en el número de píxeles, podría verse terrible. Especialmente con los navegadores móviles y las pantallas "retina", trataría de dejar la altura del div flexible si el diseño lo permite, ¡lo que debería!

— PJ Brunet

154

Puedes usar:

overflow:hidden;

para ocultar el texto fuera de la zona.

Tenga en cuenta que puede cortar la última letra (por lo que aún se mostrará una parte de la última letra). Una forma más agradable es mostrar una elipsis al final. Puedes hacerlo usando text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

— Arseni Mourzenko
fuente

white-space: nowrap no es realmente tan necesario porque tengo varias líneas que muestran una ruta de archivo larga. Sin espacios en blanco, el camino largo irrompible tendrá puntos suspensivos, luego la siguiente línea mostrará el resto del camino. El truco es que puedo copiar el texto (incluidos los puntos suspensivos) y luego pegaré la ruta completa. ¡Agradable!

— Robert Koch

En caso de que se esté preguntando (como yo), la elipsis no funcionará en versiones anteriores de Firefox. "Desde Firefox versión 7 text-overflow: elipsis es compatible". stackoverflow.com/questions/5990414/…

— PJ Brunet

¿Qué pasa si desea tener una información sobre herramientas al pasar el mouse para mostrar el texto completo, o algo similar?

— pedrorijo91

2

@ pedrorijo91 Simplemente podría usarlo title="full text goes here"en el html.

— Jerry

27

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}

http://jsfiddle.net/hT3YA/

— s1ntez
fuente

9

¿Por qué no utilizar unidades relativas?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

— Tomas Macek
fuente

4

El siguiente código ocultará su texto con el ancho fijo que usted decida. pero no del todo adecuado para diseños receptivos.

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Actualizar

He notado en el (los) dispositivo (s) (móvil) que el texto (mezclado) entre sí debido a (ancho fijo) ... así que he editado el código de arriba para ocultarlo de la siguiente manera:

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

El (ancho máximo) asegura que el texto se ocultará de manera receptiva sea cual sea el (tamaño de pantalla) y no se mezclará entre sí.

— Juegos de Mizo
fuente

3

Si bien este código puede responder a la pregunta, proporcionar un contexto adicional sobre por qué y / o cómo este código responde a la pregunta mejora su valor a largo plazo.

— Donald Duck

0

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="cut_text">

very long text
</div>

Expandir fragmento

— Supriya
fuente