web-dev-qa-db-fra.com

Troncature CSS de débordement de texte

Auparavant, je le faisais dynamiquement en utilisant JS .. mais nous obtenions des problèmes de performances, car nous devons proposer une option alternative.

Je tronque maintenant un long texte sur les noms de mes onglets en utilisant le style de débordement de texte.

mais j'ai un petit problème si quelqu'un peut le résoudre

actuellement, voici à quoi ressemble ma troncature de texte

Ce texte a été supprimé ...

Ici, les trois points (...) sont de couleur noire et je veux le changer en rouge.

Existe-t-il un moyen de réaliser celui-ci?

csstexttruncatecss3
30
nipiv

Fonctionne ici:

Code (HTML et 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;
}

Les points de fin/ellipses sont colorés en rouge en utilisant ce CSS de base.

81
user1386320

Je suppose que vous voulez seulement que les points apparaissent en rouge? Malheureusement, ce n'est pas possible avec un simple CSS. Cependant, j'ai trouvé un tutoriel qui parvient à créer un style Ellipsis personnalisé, qui ne s'affichera que lorsque cela sera nécessaire:

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

C'est assez sympa et pas facile à expliquer avec des mots. Peut-être que ce jsfiddle que je viens de faire peut vous aider:

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

Retirer le overflow: hidden; sur le .wrap pour voir ce qui se passe. L'idée principale est que le .end div se déplace vers le bas à gauche dans .left-side lorsque le texte déborde, tandis que lorsqu'il ne déborde pas, il se trouve en bas à droite de .text. Puis le .Ellipsis div est positionné en absolu à l'intérieur du relatif .end, donc lorsque vous le positionnez à droite, il est visible lorsque le texte déborde et qu'il déborde lorsque le texte ne déborde pas! C'est drôle, non?

Quoi qu'il en soit, voici le code brut:

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;
}

Bien sûr, lorsque vous allez implémenter cela, vous souhaitez supprimer toutes les bordures et le texte de fin. J'ai fait de ceci un exemple facile à comprendre. Vous voudrez probablement aussi donner à l'habillage un position: absolute; puis donnez-le margin-left: -32px, où la largeur est la largeur du .left-side, donc votre texte n'aura pas de marge sur le côté gauche.

Bonne chance!

2
gitaarik