Rozwiązanie 1:
pomocą WebKit tylko -webkit-line-clamp nieruchomość na 2 liniach.
.overme {
width: 300px;
height: 60px;
line-height: 30px;
overflow:hidden;
font-size: 30px;
color: red;
background: #333;
/*The problematic part is below*/
white-space:nowrap;
text-overflow: ellipsis;
}
.overme {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
<div class="overme">
how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>
roztworu 2
stosowania jako :after pseudo element dostosowane do dolnego prawego rogu. Działa to tylko wtedy, gdy tekst jest statyczny i wcześniej wiedziałeś, że przepełni on kontener.
.overme {
width: 300px;
height: 60px;
line-height: 30px;
overflow:hidden;
font-size: 30px;
color: red;
background: #333;
position: relative;
}
.overme:after {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
content: '...';
}
<div class="overme">
how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>
Rozwiązanie 3 - Cross-browser
Ten JS rozwiązanie porównuje wysokość kontenera nadrzędnego (div) przed tekstem treści. Jeśli wysokość tekstu jest większa niż wysokość rodzica, do rodzica zostanie dodana klasa .overflows.
Aby to sprawdzić, usuń tekst, aby pasował do wszystkich w rodzicu. Nie będziesz już widział kropek.
$(".overme").each(function() {
var $elem = $(this);
$elem.addClass($elem[0].scrollHeight > $elem.height() ? 'overflows' : null);
});
.overme {
width: 300px;
height: 60px;
line-height: 30px;
overflow:hidden;
font-size: 30px;
color: red;
background: #333;
position: relative;
}
.overme.overflows:after {
display: inline-block;
background: #333;
position: absolute;
right: 2px;
bottom: 0;
content: '...';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overme">
how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>
zobaczyć http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ – fcalderan
można stwierdzić, że 'white-space: nowrap;' tak jak tekst zawinęłaby się do drugiej linii? A poza tym - nie jest to możliwe w css, musisz używać javascript, czy to cię interesuje? Istnieją rozwiązania bez js, ale będziesz mieć problem z wstawianiem kropek po tekście, ponieważ css nie wie, jak długi jest twój tekst. –
http://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-day-lines może ci to pomoże. –