¿Cómo puedo imitar el desbordamiento de texto: puntos suspensivos en Firefox?

Question

Tengo un texto dinámico contenido en un div que se establece en lo que sea que un usuario ingrese en un campo de cuadro de texto. Si el texto no cabe en el div, en este momento solo se corta en el borde y todo el texto que se extiende más allá del borde no es visible. Me gustaría truncar el texto para que quepa dentro del cuadro y tenga puntos suspensivos (...) al final. Por ejemplo:

|----div width------|
 Here is some sample text that is too long.
 Here is some sam...

Obviamente, en el ejemplo es fácil porque la etiqueta de código usa una fuente de ancho fijo, por lo que es tan simple como contar caracteres. Tengo una fuente de ancho variable, por lo que si ingresan " WWWWWWWWWWW " se llenará con muchos menos caracteres que '' ................ '' haría.

¿Cuál es la mejor manera de hacer esto? Encontré una solución potencial para simplemente encontrar el ancho de píxel real del texto aquí: http://www.codingforums.com/archive/index.php/t-100367.html

Pero incluso con un método como ese, es un poco incómodo implementar los puntos suspensivos. Entonces, si son 20 caracteres y encuentro que no encaja, tendría que truncar a 19, agregar los puntos suspensivos y luego verificar si encaja nuevamente. Luego trunca a 18 (más los puntos suspensivos) e intenta nuevamente. Y otra vez. Y de nuevo ... hasta que encaje. ¿Hay una mejor manera?

EDITAR: He decidido, basándose en las respuestas, que mi enfoque original es el mejor, excepto que he tratado de mejorar la solución en el enlace anterior al no crear un elemento td separado simplemente para medir, que se siente como un truco.

Aquí está mi código:

<div id="tab" class="tab">
    <div id="tabTitle" class="tabTitle">
        <div class="line1">user-supplied text will be put here</div>
        <div class="line2">more user-supplied text will be put here</div>
    </div>
</div>

Y estilos:

.tab {
padding: 10px 5px 0px 10px;
margin-right: 1px;
float: left;
width: 136px;
height: 49px;
background-image: url(../images/example.gif);
background-position: left top;
background-repeat: no-repeat;
}    

.tab .tabTitle {
    height: 30px;
width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
font-size: 12px;
font-weight: bold;
color: #8B8B8B;
}

.tab .tabTitle .line1, .tab .tabTitle .line2 {
    display:inline;
    width:auto;
}

y el javascript que recorta y agrega puntos suspensivos:

function addOverflowEllipsis( containerElement, maxWidth )
{
    var contents = containerElement.innerHTML;
    var pixelWidth = containerElement.offsetWidth;
    if(pixelWidth > maxWidth)
    {
        contents = contents + "…"; // ellipsis character, not "..." but "…"
    }
    while(pixelWidth > maxWidth)
    {
        contents = contents.substring(0,(contents.length - 2)) + "…";
        containerElement.innerHTML = contents;
        pixelWidth = containerElement.offsetWidth;
    }
}

La " línea1 " y "línea2" divs se pasan a la función. Funciona en el caso de una entrada de una sola palabra como " WWWWWWWWWWWWWWWWW " pero no funciona una entrada de varias palabras "WWWWW WWWWW WWWWW" porque solo agrega saltos de línea y mide el texto como el ancho de "WWWWW".

¿Hay alguna manera de arreglar esto sin recurrir a copiar el texto en un elemento de medición oculto? ¿Alguna forma de establecer el estilo de los divisores de línea para que no envuelvan texto?

Answer 1

  

¿Alguna forma de establecer el estilo de los divisores de línea para que no envuelvan texto?

Allí tiene el espacio en blanco: nowrap para. Sí, esto también funciona en navegadores antiguos.

Answer 2

Este problema también debe estar funcionando en Firefox.

HTML

<div class="ellipsis">Here goes too long text and when it is takes more than 200px in "end" of the text appears "..."</div>

CSS

.ellipsis{
width:200px;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('bindings.xml#ellipsis');//issue for Firefox
}

enlaces.xml

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="none">
    <content><children/></content>
</binding>
<binding id="ellipsis">
    <content>
        <xul:label crop="end"><children/></xul:label>
    </content>
    <implementation>
        <field name="label">document.getAnonymousNodes(this)[0]</field>
        <field name="style">this.label.style</field>
        <property name="display">
            <getter>this.style.display</getter>
            <setter>if(this.style.display!= val)this.style.display=val</setter>
        </property>
        <property name="value">
            <getter>this.label.value</getter>
            <setter>if(this.label.value!=val)this.label.value=val</setter>
        </property>
        <method name="update">
            <body>
                var strings= this.textContent.split(/\s+/g)
                if(!strings[0])strings.shift()
                if(!strings[strings.length-1])strings.pop()
                this.value=strings.join('')
                this.display=strings.length?'':'none'
            </body>
        </method>
        <constructor>this.update()</constructor>
    </implementation>
    <handlers>
        <handler event="DOMSubtreeModified">this.update()</handler>
    </handlers>
</binding>
</bindings>

Answer 3

Si está utilizando jQuery, hay un gran complemento que uso.

Alternativamente, [este ejemplo] (¡404 NO ENCONTRADO!) parece funcionar en varios navegadores.

¡Cualquier pregunta, contáctame en los comentarios!

404 enlace: http://www.hedgerwow.com/360/ dhtml / text_overflow / demo2.php

Answer 4

La nueva versión de CSS (CSS3) debe incluir text-overflow: ellipsis , que lo hace por usted. Actualmente funciona en las versiones IE 6 y posteriores, así como en Safari y Chrome. Firefox no lo admite, por lo que esta no es realmente una respuesta útil todavía, pero vale la pena tener en cuenta que la mejor forma real será, eventualmente, dejar que CSS maneje esto.

Borrador de especificaciones CSS3: http: //www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

Navegadores compatibles: http://www.quirksmode.org/css/contents.html (desplácese hacia abajo para " text-overflow " cerca de la parte inferior)

Answer 5

Simplemente, no, no hay mejor manera sin recurrir a los hacks.

Podría, por ejemplo, usar una posición: rango absoluto para posicionar su " ... " encima del contenido real, con desbordamiento: conjunto oculto en el contenedor, y solo oculta el espacio extra si el contenido cabe dentro del contenedor. Eso le permitiría ejecutar el código de truncamiento solo una vez.

Personalmente, acabo de ejecutar el cálculo del ancho de píxeles algunas veces más. Configurar el texto y leer el ancho es una operación rápida, por lo que no debería ser notable.

Answer 6

Use text-overflow: puntos suspensivos . No es solo para IE ... La mayoría de los principales navegadores pueden hacer esto.
Pero si no puede aquí es un complemento jQuery para esto.

Answer 7

Para responder solo uno de los puntos que plantea:

  

Entonces, si son 20 caracteres y encuentro   que no encaja, tendría que   truncar a 19, agregar puntos suspensivos y   luego verifique si encaja nuevamente. Entonces   truncar a 18 (más los puntos suspensivos) y   Inténtalo de nuevo. Y otra vez. Y   de nuevo ... hasta que encaje. Hay un   mejor manera?

Una forma mucho más rápida de encontrar la longitud correcta es cortar la cuerda por la mitad, probar para ver si se ajusta. Si lo hace: agregue una cuarta parte de la longitud original nuevamente, y si no corta un cuarto, pruebe eso para ver si se ajusta. Repita recursivamente con 1/8, 1/16, 1/32, ... de la longitud original, hasta que este valor de suma / resta sea menor que 1.

Es un algoritmo de búsqueda: para cadenas que son más largas que unas pocas palabras, generalmente puede reducir el número de pruebas que debe realizar en el DOM en un factor de 10.

Answer 8

Prueba esto:

Enlace uno

Actualización:

Si usa el propietario {word-wrap: break-word;}, IE forzará un salto de línea. Los navegadores modernos podrían tener el {overflow: visible;} predeterminado, y se desbordarían correctamente, sin expandir el contenedor.

Answer 9

No, no es una tarea simple. Tuve que hacer lo mismo hace un año y descubrí que incluso Internet Explorer (desde la versión 6), Opera y Safari pueden hacerlo, pero no Firefox. Lo siento, solo los piratas informáticos pueden salvarte

Answer 10

pruebe dojox.html.ellipsis

Answer 11

Con Opera:

-o-text-overflow:ellipsis;

Answer 12

Cambié this.value = strings.join ('') a this.value = strings.join ('') de Binyamin , y me funcionó bien!

Answer 13

Acerca de Firefox 4.0 y el, todavía sin implementar, desbordamiento de texto: puntos suspensivos propiedad CSS:

Este enlace ofrece una solución parcial al problema.

Produce un resultado similar al desbordamiento de texto: puntos suspensivos usando solo css.