CODEWITHSUNDEEP
overflowellipsiscss
ChristopherStrydom
ChristopherStrydom

Reputation: 8206

CSS text-overflow: ellipsis; not working?

I don't know why this simple CSS isn't working...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Should cut off around the 4th "Test"

Upvotes: 746

Views: 922661

Answers (24)

gxt
gxt

Reputation: 136

None of the above solutions worked for me, particularly regarding the width. Since I can’t set a fixed width and need it to adapt based on the parent element, I used container queries with max-width: 100cqi;, which adjusts to 100% of the parent container width.

There’s no need to set a width on .container; if it’s within a grid, the grid defines the width automatically, making it fluid rather than fixed. My solution below ensures that clipped text won’t overflow the parent but will instead display an ellipsis as expected.

div.container {
  container: container / inline-size;

  width: min(10rem, 100%); /* demo only */
  outline: 2px dotted blue /* demo only */
}

div.app a {
    display: inline-block;
    text-overflow: ellipsis;
    max-width: 100cqi;
    white-space: nowrap;
    overflow: clip;

    background: red /* demo only */
}
<div class="container">
  <div class="app">
    <a href="#">Test1 Test2 Test3 Test4 Test5 Test6</a>
    <a href="#">Test1 Test2 Test3 Test4</a>
    <a href="#">Test1 Test2</a>
  </div>
</div>

Upvotes: 1

JJAHMEDAMER
JJAHMEDAMER

Reputation: 229

In My Case the display: flex; was preventing it from working

<p> <icon/> text </p>

p {
  display: flex; // prevent it from working
  overflow: hidden;
  white-space: nowarp;
  text-overflow: ellipsis;
}

<p> <icon/> <span> text </span> </p>

p {
  display: flex; // prevent it from working
}

span {
  overflow: hidden;
  white-space: nowarp;
  text-overflow: ellipsis;
}

Upvotes: 4

ahmnouira
ahmnouira

Reputation: 3501

You can do it using this:

p {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

Upvotes: 2

M_Dz
M_Dz

Reputation: 41

In responsive cases set max-width to parent element.

.wrapper {
  background-color: teal;
  padding: 40px 160px;
}

.container {
  padding: 20px 10px;
  background-color: white
}

.overflow-parent {
  max-width: 100px;

}

.overflow-content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="wrapper">
  <div class="container">
    <div class="overflow-parent">
      <div class="overflow-content" title="some looooooooooong ellipsed text">
        some looooooooooong ellipsed text
      </div>
    </div>
  </div>
</div>

Or even without max-width:

.wrapper {
  background-color: teal;
  padding: 40px 260px;
}

.container {
  padding: 20px 10px;
  background-color: white
}

.overflow-content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="wrapper">
  <div class="container">
      <div class="overflow-content" title="some looooooooooong ellipsed text">
        some looooooooooong ellipsed text
      </div>
  </div>
</div>

Upvotes: 2

Pawan
Pawan

Reputation: 51

As stated in the other answers:

  • The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
  • The element must have overflow:hidden and white-space:nowrap set.

But this can be bypassed using the -webkit-line-clamp property along with the text-overflow to achieve ellipsis that are not bound to fixed width.

--line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: var(--line-clamp);
-webkit-box-orient: vertical;

Update the --line-clamp variable in the above snippet to use it for multi-line ellipsis.

Upvotes: 3

Simran Singh
Simran Singh

Reputation: 2899

If you're trying to add text ellipsis inside a flex element. Make sure either you pass width to the child element or simply add max-width: 0

Upvotes: 0

geppy
geppy

Reputation: 121

For me I wasn't setting it inside the inner div I was setting it in outer div so even though I had nowrap, overflow:hidden, and a set width it wasn't working. The code looked like:

<div className="outer">
  <ToolTip>
    <div className="inner"> long content needing to be cut
    </div>
  </ToolTip>
</div>

Upvotes: 3

Shabbir Lakdawala
Shabbir Lakdawala

Reputation: 71

You can also add float:left; inside this selector:

#User_Apps_Content .DLD_App a

Upvotes: -9

Atul Tiwaree
Atul Tiwaree

Reputation: 191

Just add in the div containing that paragraph

white-space: nowrap 
width: 50px; 
overflow: hidden;
text-overflow: ellipsis; 
border: 1px solid #000000;

Upvotes: 10

YulePale
YulePale

Reputation: 7736

I have been having this problem and I wanted a solution that could easily work with dynamic widths. The solution use css grid. This is how the code looks like:

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
}

.dynamic-width-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fixed-width-child {
  white-space: nowrap;
}
<div class="parent">
  <div class="dynamic-width-child">
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="fixed-width-child">Why?-Zed</div>
</div>

Upvotes: 41

Bidisha Das
Bidisha Das

Reputation: 402

Please also ensure, that the immediate enclosing element has a fixed width, and the span where you want to apply ellipsis , has a display:block

Upvotes: 3

Supreme Dolphin
Supreme Dolphin

Reputation: 2624

The accepted answer is awesome. However, you can still use % width and attain text-overflow: ellipsis. The solution is simple:

display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */

It seems whenever you use calc, the final value is rendered in absolute pixels, which consequentially converts 80% to something like 800px for a 1000px-width container. Therefore, instead of using width: [YOUR PERCENT]%, use width: calc([YOUR PERCENT]%).

Upvotes: 189

alextanhongpin
alextanhongpin

Reputation: 655

I faced the same issue and it seems like none of the solution above works for Safari. For non-safari browser, this works just fine:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

For Safari, this is the one that works for me. Note that the media query to check if the browser is Safari might change over time, so just tinker with the media query if it doesn't work for you. With line-clamp property, it would also be possible to have multiple lines in the web with ellipsis, see here.

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

Upvotes: 18

Siraj Alam
Siraj Alam

Reputation: 10085

Write these in your css rule.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Upvotes: -3

Spudley
Spudley

Reputation: 168853

text-overflow:ellipsis; only works when the following are true:

  • The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
  • The element must have overflow:hidden and white-space:nowrap set.

The reason you're having problems here is because the width of your a element isn't constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.

You can fix this by doing one of the following:

  • Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
  • Set one of its container elements to display:block and give that element a fixed width or max-width.
  • Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

I'd suggest display:inline-block, since this will have the minimum collateral impact on your layout; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.

Here's a snippet with your code, with a display:inline-block added, to show how close you were.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Useful references:

Upvotes: 1606

Manoj Selvin
Manoj Selvin

Reputation: 2393

Include the four lines written after the info for ellipsis to work

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Upvotes: 15

NVRM
NVRM

Reputation: 13162

MUST contain 

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

MUST NOT contain

display: inline

SHOULD contain

position: sticky

Upvotes: 5

Herick
Herick

Reputation: 1947

So if you reach this question because you're having trouble trying to get the ellipsis working inside a display: flex container, try adding min-width: 0 to the outmost container that's overflowing its parent even though you already set a overflow: hidden to it and see how that works for you.

More details and a working example on this codepen by aj-foster. Totally did the trick in my case.

Upvotes: 114

T04435
T04435

Reputation: 14032

I had to make some long descriptions ellipse(take only one lane) while being responsive, so my solution was to let the text wrap(instead of white-space: nowrap) and instead of fixed width I added fixed height:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

Upvotes: 0

Penny Liu
Penny Liu

Reputation: 17498

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: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

Upvotes: 4

Sanjib Debnath
Sanjib Debnath

Reputation: 3795

You just add one line css:

.app a {
   display: inline-block;
}

Upvotes: 1

santhoshkumar
santhoshkumar

Reputation: 71

anchor,span... tags are inline elements by default, In case of inline elements width property doesn't works. So you have to convert your element to either inline-block or block level elements

Upvotes: 7

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

Also make sure word-wrap is set to normal for IE10 and below.

The standards referenced below define this property's behavior as being dependent on the setting of the "text-wrap" property. However, wordWrap settings are always effective in Windows Internet Explorer because Internet Explorer does not support the "text-wrap" property.

Hence in my case, word-wrap was set to break-word (inherited or by default?) causing text-overflow to work in FF and Chrome, but not in IE.

ms info on word-wrap property

Upvotes: 8

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

Add display: block; or display: inline-block; to your #User_Apps_Content .DLD_App a

demo

Upvotes: 9

Related Questions