CODEWITHSUNDEEP
htmlcss
magasr
magasr

Reputation: 513

How do I use css to shorten text with ellipses?

Basically what says in the title. I want long strings to be shortened with ellipses.

In my example below I want string which are longer than let's say 100 px to be shortened.

So string "This is my full name which should be shortend" should be displayed as "This is my full name which..." and stay in the same line as the trailing 2.000,00 EUR

How do I achieve this?

Here's my HTML

<div class="don_single_donatori">
  <div class="viewport">
    <div class="overview">
      <p>This is my full name which should be shortend<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>500,00 EUR</em></p>
      <p>This is another long name that needs shortening<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>2.000,00 EUR</em></p>
    </div>
  </div>

Here's the css

.don_single_donatori {
  width: 250px;
  min-height: 310px;
  border: 1px solid #E1E1E1;
  background-color: #fff;
  border-radius: 7px;
}

.overview em {
  font-style: normal;
  color: #000;
  float: right;
}

Here's my example in jsfiddle

Upvotes: 1

Views: 1251

Answers (4)

Govind
Govind

Reputation: 172

To truncate you should use following css

text-overflow:ellipsis;width:100px;white-space: nowrap;overflow: hidden;

.

Please find the below code, you could find a span tag added additionally to split the text for truncate.

HTML :

<div class="don_single_donatori"><div class="viewport">
<div class="overview">
  <p><span>This is my full name which should be shortend</span><em>2.000,00 EUR</em></p>
  <p><span>Anonymous</span><em>2.000,00 EUR</em></p>
  <p><span>Anonymous</span><em>500,00 EUR</em></p>
  <p><span>This is another long name that needs shortening</span><em>2.000,00 EUR</em></p>
  <p>Anonymous<em>2.000,00 EUR</em></p>
</div>

CSS:

    .don_single_donatori{
  width: 250px;
  min-height: 310px;
  border: 1px solid #E1E1E1;
  background-color: #fff;
  border-radius: 7px;
}

.overview span{
  text-overflow:ellipsis;
  width:100px;
  white-space: nowrap;
  overflow: hidden;
  display:inline-block;
}

.overview em {
  font-style: normal;
  color: #000;
  float: right;
}

Upvotes: 1

Rahul
Rahul

Reputation: 4364

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Both of the following properties are required for text-overflow:

white-space: nowrap; overflow: hidden;

for reference https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

.don_single_donatori {
  width: 250px;
  min-height: 310px;
  border: 1px solid #E1E1E1;
  background-color: #fff;
  border-radius: 7px;
}

.overview em {
  font-style: normal;
  color: #000;
  float: right;
}
.overview p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div class="don_single_donatori">
  <div class="viewport">
    <div class="overview">
      <p>This is my full name which should be shortend<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>500,00 EUR</em></p>
      <p>This is another long name that needs shortening<em>2.000,00 EUR</em></p>
      <p>Anonymous<em>2.000,00 EUR</em></p>
    </div>
  </div>

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

You can use:

p{
    white-space: nowrap; 
    width: 100px; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

The result will be text and after 3 dots (...) if width bigger then 100px
for more text-overflow:https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13407

Use the following styles on p tag

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

Upvotes: 0

Related Questions