Text-overflow CSS-afkapping

Antwoord 2, autoriteit 4%

**Eenvoudig te doen met css **

HTML

<div class="text-truncate">
The company’s commitment to rebuilding the relationship with you, our community</div>

Css:

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

Antwoord 3, autoriteit 3%

Ik neem aan dat je wilt dat de stippen alleen in het rood verschijnen? Helaas is dit niet mogelijk met simpele css. Ik heb echter een tutorial gevonden die erin slaagt een aangepaste ellipsstijl te maken, die alleen wordt weergegeven wanneer dat nodig is:

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

Het is best een aardige hack en niet gemakkelijk in woorden uit te leggen. Misschien kan deze jsfiddle die ik zojuist heb gemaakt je helpen:

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

Verwijder de overflow: hidden;op de .wrapom te zien wat er gebeurt. Het belangrijkste idee is dat de .enddiv naar de linkerbenedenhoek in .left-sidebeweegt wanneer de tekst overloopt, terwijl wanneer deze niet overloopt, deze zich rechtsonder in de tekst bevindt. de .text. Vervolgens wordt de .ellipsisdiv absoluut binnen de relatieve .endgepositioneerd, zodat wanneer u deze naar rechts plaatst, deze zichtbaar is wanneer de tekst overloopt en deze overloopt wanneer de tekst loopt niet vol! Grappig, nietwaar?

Hoe dan ook, hier is de onbewerkte code:

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

Als je dit gaat implementeren, wil je natuurlijk alle randen en de ‘end’-tekst verwijderen. Ik heb dit een gemakkelijk te begrijpen voorbeeld gemaakt. Ook wil je waarschijnlijk de wrap een position: absolute;geven en dan margin-left: -32pxgeven, waarbij de breedte de breedte is voor de .left-side, zodat je tekst geen marge aan de linkerkant heeft.

Veel succes!