Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
position: relative;
font-size: 14px;
color: #000000;
width: 240px;
}
.text-concat {
position: relative;
display: inline-block;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em;
line-height: 1.2em;
text-align: justify;
}
.text.ellipsis::after {
content: "...";
position: absolute;
right: -12px;
bottom: 4px;
}
</style>
</head>
<body>
<div class="text ellipsis">
<span class="text-concat">
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>
</div>
</body>
</html>