javascript - para - identifica la funcion de la etiqueta de html noscript

¿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 un usuario ingresa en un campo de cuadro de texto. Si el texto no encaja en el div, en este momento solo se corta en el borde y no se ve todo el texto que se extiende más allá del borde. Me gustaría truncar el texto para que quepa dentro del cuadro y tenga una elipsis (...) anexada 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, de modo que si ingresan "WWWWWWWWWWWW" se llenará con muchos menos caracteres que "................".

¿Cuál es la mejor manera de hacer esto? Encontré una solución potencial para simplemente encontrar el ancho real de píxeles 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) y vuelve a intentarlo. Y otra vez. Y otra vez ... hasta que le quede bien. ¿Hay alguna manera mejor?

EDITAR: En base a las respuestas, he decidido que mi enfoque original es el mejor, excepto que he intentado mejorar la solución en el enlace anterior al no crear un elemento td separado simplemente para medir, lo 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 los 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;
    }
}

Los divs "line1" y "line2" se pasan a la función. Funciona en el caso de una entrada de una sola palabra como "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW.

¿Hay alguna manera de solucionar este problema sin tener que copiar el texto en un elemento de medición oculto? ¿Alguna forma de configurar el estilo de los divs de línea para que no se ajusten el texto?

Answer 1

¿Alguna forma de configurar el estilo de los divs de línea para que no se ajusten el texto?

Ahí tienes el white-space: nowrap para. Sí, esto también funciona en navegadores antiguos.

Answer 2

Acerca de Firefox 4.0 y la propiedad de CSS con text-overflow:ellipsis :

This enlace da una solución parcial al problema.

Produce un resultado similar al text-overflow:ellipsis usando solo css.

Answer 3

Cambié this.value=strings.join('''') a this.value=strings.join('' '') de la respuesta de Binyamin , ¡y funcionó bien para mí!

Answer 4

Con la ópera:

-o-text-overflow:ellipsis;

Answer 5

Este problema debe estar funcionando en Firefox también.

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
}

bindings.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 6

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

Borrador de especificaciones de 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 hasta "texto desbordado" cerca de la parte inferior)

Answer 7

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

Answer 8

Para responder solo a uno de los puntos que levantas:

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) y vuelve a intentarlo. Y otra vez. Y otra vez ... hasta que le quede bien. ¿Hay alguna manera mejor?

Una forma mucho más rápida de encontrar la longitud correcta es cortar la cuerda por la mitad, y verificar si encaja. Si lo hace: agregue un cuarto de la longitud original nuevamente, y si no se corta un cuarto, entonces pruebe si encaja. Repita recursivamente con 1 / 8th, 1 / 16th, 1 / 32th, ... 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 solo unas pocas palabras, normalmente puede reducir el número de pruebas que necesita realizar en el DOM por un factor de 10.

Answer 9

Prueba esto:

Link One

Actualizar:

Si usa la propiedad de {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 adecuadamente, sin expandir el contenedor.

Answer 10

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

Por ejemplo, podría usar una posición: intervalo absoluto para colocar su "..." encima del contenido real, con desbordamiento: conjunto oculto en el contenedor, y solo ocultar el intervalo adicional si el contenido cabe dentro del contenedor. Eso te permitiría ejecutar el código de truncamiento solo una vez.

Personalmente, solo ejecuté el cálculo del ancho de píxeles unas cuantas veces más. Configurar el texto y leer el ancho es una operación rápida, por lo que no debería ser perceptible.

Answer 11

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

Alternativamente, [este ejemplo] (404 NOT FOUND!) Parece funcionar en todos los navegadores.

Cualquier duda, dame en los comentarios!

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

Answer 12

Utilizar text-overflow:ellipsis . No es solo para IE ... La mayoría de los principales navegadores pueden hacer esto.
Pero si no puedes, aquí hay un complemento de jQuery para esto.

Answer 13

prueba dojox.html.ellipsis