html - significa - Desbordamiento de texto: elipsis no funciona

seo imagenes wordpress

Question

Esto es lo que intenté (ver here ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Esencialmente, quiero que el espacio se reduzca con puntos suspensivos cuando la ventana se hace pequeña. ¿Qué hice mal?

Answer 1

Para multiples lineas

En Chrome, puede aplicar este css si necesita aplicar puntos suspensivos en varias líneas.

También puede agregar ancho en su css para especificar un elemento de cierto ancho:

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Answer 2

Agregue este código a continuación para que le guste

ejemplo

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Answer 3

Agregue las siguientes líneas en CSS para que los puntos suspensivos funcionen

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

Answer 4

Asegúrese de tener un elemento de bloque, un tamaño máximo y establecer el desbordamiento en oculto. (Probado en IE9 y FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Answer 5

Debe tener un overflow CSS, width , display y white-space .

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Addendum Si desea obtener una descripción general de las técnicas para realizar el ajuste de líneas (elipses de desbordamiento de líneas múltiples), consulte esta página de Trucos CSS: https://css-tricks.com/line-clampin/

Answer 6

Estaba teniendo un problema con puntos suspensivos bajo cromo. Encendiendo el espacio en blanco: nowrap parecía arreglarlo.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

Answer 7

Para multilíneas en el uso de Chrome:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Inspirado en youtube ;-)

Answer 8

Puede intentar usar puntos suspensivos agregando lo siguiente en CSS:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Pero parece que este código solo se aplica al recorte de una línea. Puede encontrar más formas de recortar texto y mostrar puntos suspensivos en este sitio web: http://blog.sanuker.com/?p=631

Answer 9

Solo un aviso para cualquiera que pueda tropezar con esto ... Mi h2 estaba heredando

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

Lo que no permitía elipsis. Al parecer esto es muy fino eh?

Answer 10

word-wrap: break-word;

esto y solo esto hizo el trabajo para mí por un

<pre> </pre> 

etiqueta

Todo lo demás no pudo hacer los elipsis ....