Overflow:hidden dots at the end full (ok)
Previous=== End Điều quan trọng nhất cách chia cột và thay đổi vị trí ===NextGulp để viết Sass && cai dat
Last updated
Was this helpful?
Last updated
Was this helpful?
Ví dụ 1.0.1
.wp-block-latest-posts__post-title {
text-transform: lowercase;
display: inline-block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Ví dụ 1.0.2:
.entry-descript {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
}Ví dụ 1.2:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ellipsity.min.js"></script>
<style>
.container{
width:100px;
height:100px;
background-color:white;
border: 1px solid black;
padding:5px;
}
</style>
</head>
<body>
<div class="container">
<span>This is some text that I am going to ellipsify because the content this container contains is way way to long for the whole thing to be displayed and that is why I am doing this.</span>
</div>
<script>
Ellipsity.ellipsify(document.getElementsByClassName("container")[0]);
</script>
</body>
</html>
Ví dụ 1.3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style type="text/css" media="screen">
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 3.6em;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
}
.block-with-text:before {
content: "...";
position: absolute;
right: 0;
bottom: 0;
}
</style>
<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with. The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
</div>
</body>
</html>Ví dụ 1.4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style type="text/css" media="screen">
#span {
display: inline-block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<span id="span">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
</body>
</html>Ví dụ 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style type="text/css" media="screen">
#span {
line-height: 1.5em;
height: 3em;
overflow: hidden;
width: 100%;
display: block;
}
#span::before {
content: '...';
float: right;
margin-top: 1.5em;
}
</style>
<span id="span">Here is a paragraph with a lot of text, but only two visible lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum purus vitae est accumsan cursus. Donec molestie pretium nulla at blandit. Quisque eget augue et nibh dapibus vulputate. Donec nec fermentum mauris. Vivamus non ipsum sed felis viverra molestie id ac neque. Sed purus orci, egestas pellentesque dapibus id, tempor id turpis. Morbi facilisis massa purus. Donec a urna facilisis odio varius hendrerit. Nulla diam ligula, ultrices ac volutpat nec, molestie sit amet est. Pellentesque imperdiet interdum laoreet. Phasellus tincidunt felis eu urna accumsan luctus. Sed nec nisi leo. Pellentesque luctus porta turpis non sagittis. Phasellus sodales sem nec urna viverra eget porta justo tincidunt. Maecenas iaculis laoreet turpis, eu malesuada est lacinia id. Nunc arcu tellus, ultricies at vestibulum sit amet, malesuada non purus.</span>
</body>
</html>
