Dit is wat ik heb geprobeerd (zie hier):
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
}
In wezen wil ik dat de overspanning met ellips kleiner wordt wanneer het venster klein wordt gemaakt. Wat heb ik verkeerd gedaan?
Antwoord 1, autoriteit 100%
U moet CSS overflow, width(of max-width), displayen white-space.
http://jsfiddle.net/HerrSerker/kaJ3L/1/
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}
Antwoord 2, autoriteit 9%
Zorg ervoor dat je een blokelement hebt, een maximale grootte en zet overloop op verborgen. (Getest in IE9 en FF 7)
div {
border: solid 2px blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px;
}
Antwoord 3, autoriteit 5%
Voor meerdere regels in Chrome gebruik:
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;
Geïnspireerd door youtube 😉
Antwoord 4
Voor meerdere regels
In Chrome kun je deze CSS toepassen als je ellips op meerdere regels moet toepassen.
Je kunt ook breedtetoevoegen aan je CSS om een element van een bepaalde breedte te specificeren:
.multi-line-ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>Antwoord 5
word-wrap: break-word;
dit en alleen dit deed het werk voor mij
voor een
<pre> </pre>
tag
al het andere deed het weglatingsteken niet….
Antwoord 6
Ik had een probleem met ellipsis onder chrome. Witruimte aanzetten: nowrap leek het te repareren.
max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;
Antwoord 7
Alleen een waarschuwing voor iedereen die dit tegenkomt… Mijn h2 was aan het erven
text-rendering: optimizelegibility;
//Changed to text-rendering: none; for fix
die geen ellips toestond. Blijkbaar is dit erg kieskeurig hè?
Antwoord 8
Voeg deze onderstaande code toe voor waar je wilt
voorbeeld
p{
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
margin: 0 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Antwoord 9
U kunt proberen ellips te gebruiken door het volgende toe te voegen in CSS:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Maar het lijkt erop dat deze code alleen van toepassing is op een regel bijsnijden. Meer manieren om tekst bij te snijden en weglatingstekens weer te geven zijn te vinden op deze website: http://blog.sanuker.com /?p=631
Antwoord 10
Zonder vaste breedte
Voor degenen onder ons die geenvaste breedte willen gebruiken, het werkt ook met display: inline-grid. Dus samen met de vereiste eigenschappen voegt u gewoon display
toe
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-grid;
}
Antwoord 11
Voeg de volgende regels toe in CSS om ellips te laten werken
p {
display: block; // change it as per your requirement
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}