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

Question

I am using bootstrap card, trying to convert the long text of dscrptn_limit class into a more attractive one with Overflow:hidden dots at the end.

my template:

<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: 180px;
    text-overflow: ellipsis;
  }
</style>

But unfortunately, it won't work. How can I fix this?

Does this answer your question? [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) — Constantin Groß, Aug 09 '21 at 09:54

score 2 · Accepted Answer · answered Aug 09 '21 at 09:58

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>

UkFLSUI · Answer 2 · 2021-08-09T10:14:33.800

For ellipsis to be working, you need to use white-space: nowrap;. Also, you need to use display: block; for that element.

.dscrptn_limit {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: break-word;
  height: 180px;
  text-overflow: ellipsis;
  display: block;
}

<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>

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

2 Answers2