Overflow:Hidden Dots At the End

How can I show dots ( ... ) in a span with hidden overflow?

For this you can use text-overflow: ellipsis; property. Write like this

span {    display: inline-block;    width: 180px;    white-space: nowrap;    overflow: hidden !important;    text-overflow: ellipsis;}
<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</span>

HTML with text-overflow: hidden with dot at ending won't working

You need to remove height or auto and need to the section text line limit

check below example

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="card m-4" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">My title</h5>
<small class="card-text">topic</small>
<br>
<small class="card-text dscrptn_limit">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare sodales ipsum porta rhoncus. Aliquam aliquam metus a volutpat porta. In vitae lacus mi. Mauris non lacus non ligula lobortis malesuada. Suspendisse quis nibh consectetur erat accumsan porttitor. Mauris mollis, nibh ut porta tincidunt, ipsum risus sagittis elit, sed venenatis felis neque aliquet lectus. Sed tempus, orci et placerat lacinia, tellus massa semper diam, rutrum accumsan leo velit at nunc. Praesent et dignissim orci, eget dapibus urna. Mauris rhoncus tortor in risus egestas, a mattis metus sollicitudin. Suspendisse in urna non dui placerat vehicula ac et ante. Nulla ipsum mauris, varius sit amet leo non, vulputate lacinia libero. Etiam sit amet lobortis leo. Pellentesque egestas purus a ipsum consequat, at aliquam est sodales. Sed placerat, mi in rhoncus aliquet, mi ipsum rhoncus odio, sed interdum massa tellus quis mauris
</small>
</div>
</div>

<style>
.dscrptn_limit{
overflow: hidden;
white-space: normal;
word-wrap: break-word;
height: auto;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* number of lines to show */
-webkit-box-orient: vertical;
}
</style>

How to display 3 dots when text overflow div in height

You could achieve height vice text ellipsis through the '-webkit-line-clamp' css property. Use the number based on what line number you want the dots to appear.

.cut-text { 
width: 160px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
<div class="cut-text">
I like big butts and I can not lie I like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lie
</div>

Overflow:hidden dots and the end of a multiline text

Put your text in another div and use height + line-height

Working example:
http://jsfiddle.net/DNh4W/2/

If you want to end with ellipsis there is no solution in CSS3 for multiline text. You must use javascript, for example: http://pvdspek.github.com/jquery.autoellipsis/

Example of jquery autoellipsis: http://jsfiddle.net/bdM89/1/

If screen size is mobile size ,replace the end of the HTML text with two dots

Use overflow: hidden; white-space: nowrap; in conjuntion with text-overflow: ellipsis;, the later displays the ... where text overflow is present on the content.

.flex-buttons {
display: flex;
flex-wrap: nowrap;
background-color: aqua;
}

.flex-buttons > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 1.5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="flex-buttons">
<div>Stackoverflow</div>
<div>Stackoverflow</div>
<div>Stackoverflow</div>
<div>Stackoverflow</div>
<div>Stackoverflow</div>
<div>Stackoverflow</div>
<div>Stackoverflow</div>
</div>


Related Topics



Leave a reply



Submit