CSS Truncate inline text only if needed

Question

I'm trying to style a reusable component such that it will stay inline but truncate its contents whenever it overflows. What makes it trickier is that I need to have an icon on the right.

The main issue is that I need the icon to stay on the same line, so I compensate for it in the width of the truncated text (width: calc(100% - 40px)), which makes any non-truncating example be that much shorter than it's normal width.

See the snippet below and how the short example is barely visible.

body, .container {
  width: 100%;
  padding: 0;
  margin: 50px 0;
}

.quantity-value {
  display: inline-block;
  max-width: 100%;
  margin-right: 16px;
  background: #f1f1f1;
}

.value-and-icon-wrapper {
  display: inline-block;
  width: 100%;
}

.icon {
  padding-left: 5px;
}

.truncated-text {
  display: inline-block;
  width: calc(100% - 40px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  -webkit-line-clamp: 1;
}

<!-- Example 1: short -->
<div class="container">
  <div class="quantity-value">
    <div class="value-and-icon-wrapper">
      <span class="truncated-text">67</span>
      <span class="icon">ℹ️</span>
    </div>
  </div>
  other content
</div>

<!-- Example 2: long -->
<div class="container">
  <div class="quantity-value">
    <div class="value-and-icon-wrapper">
      <span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
      <span class="icon">ℹ️</span>
    </div>
  </div>
  other content
</div>

there’s an overflow property for that, did you google this? — Libra
– Libra, Commented Feb 26, 2020 at 18:49

Temani Afif · Accepted Answer · 2020-02-26 19:22:28Z

This is because you are using a lot of inline-block and the width of inline-block is defined by its content so if you set 100% - 40px for a child item, it means its width minus 40px

Try to do it differently like below using flexbox:

body, .container {
  width: 100%;
  padding: 0;
  margin: 50px 0;
}

.quantity-value {
  display: inline-flex;
  max-width: calc(100% - 16px); /* don't forget to account for margin here */
  margin-right: 16px;
  background: #f1f1f1;
}

.icon {
  padding-left: 5px;
}

.truncated-text {
  flex:1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<!-- Example 1: short -->
<div class="container">
  <div class="quantity-value">
      <span class="truncated-text">67</span>
      <span class="icon">ℹ️</span>
  </div>
  other content
</div>

<!-- Example 2: long -->
<div class="container">
  <div class="quantity-value">
      <span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
      <span class="icon">ℹ️</span>
  </div>
  other content
</div>

Without flexbox you can do it like below:

body, .container {
  margin: 50px 0;
}

.quantity-value {
  display: inline-block;
  max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
  margin-right: 16px;
  background: #f1f1f1;
  padding-right:20px;
  box-sizing:border-box;
  position:relative;
}

.icon {
  padding-left: 5px;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  
}
.truncated-text {
  display:block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<!-- Example 1: short -->
<div class="container">
  <div class="quantity-value">
      <span class="truncated-text">67</span>
      <span class="icon">ℹ️</span>
  </div>
  other content
</div>

<!-- Example 2: long -->
<div class="container">
  <div class="quantity-value">
      <span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
      <span class="icon">ℹ️</span>
  </div>
  other content
</div>

nageeb · Accepted Answer · 2020-02-26 18:15:16Z

1

Try applying the style text-overflow: ellipsis to the div that contains the text to be truncated.

MDN Documentation for text-overflow

answered Feb 26, 2020 at 18:15

nageeb

2,0421 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

CSS Truncate inline text only if needed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related