with - truncar texto css

Truncamiento de CSS de desbordamiento de texto

Question

Anteriormente lo estaba haciendo dinámicamente usando JS ... pero estábamos obteniendo algunos problemas de rendimiento, porque tenemos una opción alternativa.

Ahora estoy truncando un texto largo en los nombres de mi pestaña utilizando el estilo de desbordamiento de texto.

pero tengo un pequeño problema si alguien puede resolverlo

actualmente así es como se ve mi truncamiento de texto

Este texto ha sido trun ...

Aquí los tres puntos (...) vienen en color negro y quiero cambiarlo a rojo.

¿Hay alguna manera de que podamos lograr esto?

Answer 1

¿Supongo que solo quieres que los puntos aparezcan en rojo? Desafortunadamente esto no es posible con CSS simple. Sin embargo, encontré un tutorial que logra hacer un estilo de elipsis personalizado, que solo se mostrará cuando sea necesario:

https://www.mobify.com/dev/multiline-ellipsis-in-pure-css/

Es un truco bastante bueno y no es fácil de explicar con palabras. Quizás este jsfiddle que acabo de hacer pueda ayudarte:

http://jsfiddle.net/MyUQJ/9/

Eliminar el overflow: hidden; en .wrap para ver qué está pasando. La idea principal es que el .end div se mueve hacia la parte inferior izquierda en .left-side cuando el texto se desborda, mientras que cuando no se desborda está en la parte inferior derecha del .text . Entonces el div .ellipsis se coloca absoluto dentro del .end relativo, por lo que cuando lo .end a la derecha es visible cuando el texto se desborda y se desborda cuando el texto no se desborda. Gracioso, ¿no?

De todos modos, aquí está el código sin procesar:

HTML:

<div class="wrap">
    <div class="left-side"></div>
    <div class="text">
        This is a short story, it 
        doesn''t need to be ellipsed.
    </div>
    <div class="end">
        end
        <div class="ellipsis">...</div>
    </div>
</div>

<br>
<br>
<br>
<br>

<div class="wrap">
    <div class="left-side"></div>
    <div class="text">
        This is a long story. You won''t be able to 
        read the end of this story because it will 
        be to long for the box I''m in. The story is 
        not too interesting though so it''s good you 
        don''t waste your time on this.
    </div>
    <div class="end">
        end
        <div class="ellipsis">...</div>
    </div>
</div>

CSS:

.wrap {
    height: 100px;
    width: 234px;
    border: solid 1px #000;
    overflow: hidden;
}

.left-side {
    float: left;
    width: 32px;
    height: 100px;
    background: #F00;
}

.text {
    float: right;
    border: solid 1px #0F0;
    width: 200px;
}

.end {
    position: relative;
    float: right;
    width: 30px;
    border: solid 1px #00F;
}

.ellipsis {
    position: absolute;
    top: -25px;
    left: 198px;
    background: white;
    font-weight: bold;
    color: #F0F;
}

Por supuesto, cuando va a implementar esto, quiere eliminar todos los bordes y el texto ''final''. Hice esto para ser un ejemplo fácil de entender. También es probable que quiera darle a la envoltura una position: absolute; y luego darle margin-left: -32px , donde el ancho es el ancho para el .left-side , por lo que su texto no tendrá un margen en el lado izquierdo.

¡Buena suerte!

Answer 2

Funciona aquí:

• http://jsfiddle.net/TReRs/4/

Código (HTML y CSS):

<div class="overme">
    how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>

CSS:

.overme {
    width: 300px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    color: red;
}

Los puntos y puntos suspensivos finales se colorean en rojo con ese CSS básico.