CODEWITHSUNDEEP
htmlcss
mannicken
mannicken

Reputation: 7123

Overflow:hidden dots at the end

Let's say I have a string "I like big butts and I cannot lie" and I cut it with overflow:hidden, so it displays something like this:

I like big butts and I cann

cutting off the text. Is it possible to display this like this:

I like big butts and I cann...

using CSS?

Upvotes: 390

Views: 673267

Answers (11)

Muhammad Taha
Muhammad Taha

Reputation: 365

.cut-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Upvotes: 7

Rohit Parte
Rohit Parte

Reputation: 4036

Hide text on load and show on hover

.hide-text {
  width: 70px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

span:hover {
   white-space: unset;
   text-overflow: unset;
}
<span class="hide-text"> How to hide text by dots and show text on hover</span>

Upvotes: 26

Joe Phillips
Joe Phillips

Reputation: 51140

You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.

Here's a demo on jsbin.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}
<div class="cut-text">
I like big butts and I can not lie.
</div>

Upvotes: 549

manoj patel
manoj patel

Reputation: 1240

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

Upvotes: 12

Vu Phan
Vu Phan

Reputation: 584

Hopefully it's helpful for you:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

Upvotes: 30

Penny Liu
Penny Liu

Reputation: 17428

In bootstrap 4, you can add a .text-truncate class to truncate the text with an ellipsis.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>

Upvotes: 12

Nagendra Matala
Nagendra Matala

Reputation: 481

Try this if you want to restrict the lines up to 3 and after three lines the dots will appear. If we want to increase the lines just change the -webkit-line-clamp value and give the width for div size.

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

Upvotes: 47

Arjun
Arjun

Reputation: 2227

Check the following snippet for your problem 

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>

Upvotes: 118

Cuteboy_Max
Cuteboy_Max

Reputation: 131

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

Upvotes: 6

Maju
Maju

Reputation: 616

Most of solutions use static width here. But it can be sometimes wrong for some reasons.

Example: I had table with many columns. Most of them are narrow (static width). But the main column should be as wide as possible (depends on screen size).

HTML:

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

CSS:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

Upvotes: 5

ceejayoz
ceejayoz

Reputation: 180023

Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.

Upvotes: 15

Related Questions