Text-Overflow: Ellipsis Not Working

CSS text-overflow: ellipsis; not working?

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>

text-overflow: ellipsis is not working in table

It happens because of the display property in table. You need to give a display: block to make ellipsis work, but it kind of removes how tables should work.

The better thing would be to wrap your td contents inside a div
and change your CSS.

Option 2 would be using max-width to your td`.

<td width="50px">
  <div>Hello World</div>
</td>

CSS to:

td>div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50px
}

OR Just add max-width

.container {
  display: flex;
  flex-direction: row;
}

p,
td>div,td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;
}

<div class="container" style="width:100px; background-color: red">
  <p width="50px">
    Hello world
  </p>
  <p width="50px">
    Hello world
  </p>
</div>

<table style="background-color: green">
  <tr width="100px">
    <td width="50px">
      <div>

        Hello World</div>
    </td>
    <td width="50px">
      <div>

        Hello World</div>
    </td>
    <td width="50px">
      Hello World
    </td>
  </tr>
</table>

text-overflow: ellipsis not working

You need to have CSS overflow, width (or max-width), display, and white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

<span>Test test test test test test</span>

text-overflow: ellipsis is not working

You need to add white-space: nowrap to the element with ellipsis type of text-overflow. Otherwise, the text is wrapped to the new line every time and no text-overflow is detected.

Here is your working fiddle: http://jsfiddle.net/59m5e6ex/2/

So, you need at least 3 properties to run text-overflow: ellipsis;:

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

Also, if you cannot use any of the needed properties here is the javascript you can use for adding "3 dots" at the end of the text.

/**
 * @param  text          string       - text to shorten
 * @param  maxTextLength int          - desired max length of shorten string
 * @return ret           string       - new shortened string
 */
function shorten(text, maxTextLength) {
    var ret = text;
    if (ret.length > maxTextLength) {
        ret = ret.substr(0,maxTextLength-3) + "...";
    }
    return ret;
}

It would return a new string with the specified maximum length. But of course, it will change its value. More in this topic can be found here

CSS text-overflow ellipsis not working in Grid / Flex

To make the ellipsis work you need to target the text not the container.

In your code, you are setting the ellipsis on the flex container (a grid item):

.gridItem {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(50px + 2vw);
    border:1px solid red;
}

The child of the container is the text. Except you can't apply any CSS directly to the text because it's an anonymous flex item (i.e., a flex item with no defined tags around it). So you need to wrap the text into an element and then apply the ellipsis code.

From this:

<div class="gridItem">Why no ellipsis on this div?</div>

To this:

<div class="gridItem"><span>Why no ellipsis on this div?</span></div>

Then you have to contend with the minimum sizing algorithm of flex items. This rule, set by default, states that a flex item cannot be smaller than its content along the main axis. The solution to this problem is to set the flex item to min-width: 0, which overrides the default min-width: auto.

.grid {  display: grid;  margin: auto;  width: 90%;  grid-template-columns: 2fr 15fr;}
.gridItem {  display: flex;  align-items: center;  height: calc(50px + 2vw);  border: 1px solid red;  min-width: 0;}
.gridItem > span {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

<div class="grid">  <div class="gridItem"><span>Why no ellipsis on this div?</span></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div></div>

text-overflow ellipsis not working in nested flexbox

There are two issues in your code preventing the ellipsis from working:

div.right contains div.header, which in turn contains the button and text.
div.right is a flex item in the main container (.container).
By default, a flex item cannot be smaller than the size of its content. The initial setting on flex items is min-width: auto.
This means that the length of your text, which is not wrapping, will set a minimum size for parent flex items. One way to enable flex items to shrink past their content is to set a flex item to min-width: 0.
You've done this already for the .content flex item, but it needs to be set on the .right item, as well.
You've got the .content element set to flex: 0 1 auto.
This tells the flex item to use the size of the content (flex-basis: auto). The text sets the size.
Instead, set the width to 0 and let the flex container distribute space, as necessary. You can do this with flex: 1 1 0, which is the same as flex: 1.

.container {  display: flex;  height: 100vh;}.left {  width: 200px;  background-color: yellow;}.right {  flex: 1;  background-color: blue;  color: white;  min-width: 0;             /* NEW */}.header {  background: red;  color: white;  display: flex;  flex-direction: row;}.header .content {  white-space: nowrap;  flex: 1;                  /* ADJUSTMENT */  text-overflow: ellipsis;  overflow: hidden;  min-width: 0;}.header .buttons {  background: green;  flex: 1 0 auto;}.header .content:hover {  white-space: normal;}

<div class="container">
  <div class="left">    content left  </div>  <div class="right">    <div class="header">      <div class="buttons">buttons</div>      <div class="content">        This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex      </div>      <div class="buttons">buttons</div>    </div>    content right  </div>
</div>

Text Overflow ellipsis not working in CSS

Here is the most precise answer, responsive and irrespective of text in c-vis__duration:

.c-vis__head-left {
    display: flex;
    align-items: center;
    justify-content: start;
    overflow: hidden; // Add this
}

.c-vis__duration {
    font-size: 16px;
    color: red;
    flex-shrink: 0; // Add this
}

.c-vis__head-section {
  padding: 32px 60px 30px 32px;
  border-bottom: 2px solid #ddd;
  border-left: 4px solid transparent;
}

.c-vis__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 20px;
}

.c-vis__head-left {
  display: flex;
  align-items: center;
  justify-content: start;
  overflow: hidden;
}

.c-vis__number {
  width: 36px;
  height: 35px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 25px;
  color: #333;
}

.c-vis__head-text {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-vis__duration {
  font-size: 16px;
  color: red;
  flex-shrink: 0;
}

<div class="c-vis__head-section">
  <div class="c-vis__heading">
    <div class="c-vis__head-left">
      <div class="c-vis__number">1</div>
      <h3 class="c-vis__head-text">Morals</h3>
    </div>
    <label class="c-vis__duration">3 Weeks</label>
  </div>
  <p class="c-vis__para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

<div class="c-vis__head-section">
  <div class="c-vis__heading">
    <div class="c-vis__head-left">
      <div class="c-vis__number">2</div>
      <h3 class="c-vis__head-text">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit 58l8l8lutl </h3>
    </div>
    <label class="c-vis__duration">35 Weeks</label>
  </div>
  <p class="c-vis__para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>

Ellipsis not working

From the MDN webpage for text-overflow (bold added for emphasis):

This property only affects content that is overflowing a block container element in its inline progression direction

You need to apply text-overflow to a block container, but you are applying it to an inline container (span). You could solve the problem in two different ways:

Make the span have a display of block/inline-block:
Or apply the text-overflow to the div instead of the span

text-overflow: ellipsis not working on nested flex container

You need to remove flex for .label and to align, use align-items: center; for its parent.

.parent-container {  align-items: stretch;  display: flex;  flex-flow: column nowrap;  width: 100%;}
.item-container {  border: 1px solid #ebf0ff;  border-radius: 0.25rem;  display: flex;  align-items: center;  flex-flow: row nowrap;  height: 3.25rem;  margin: 0.5rem 1rem;  padding: 0.5rem 1rem;}
.label {  flex-flow: row nowrap;  font-family: sans-serif;  font-weight: 500;  min-width: 0;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

<!DOCTYPE HTML>
<html>
<body>  <div class="parent-container">    <div class="item-container">      <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>    </div>  </div></body>
</html>