Text-Overflow: Ellipsis Doesn't Appear to Be Working

text-overflow: ellipsis doesn't appear to be working

You need to add white-space: nowrap; for text-overflow: ellipsis; to work.

Demo: http://jsfiddle.net/ThinkingStiff/Dc7UA/

Output:

CSS:

a { 
    text-decoration: none; 
    text-overflow: ellipsis; 
    display: block; 
    overflow: hidden; 
    white-space: nowrap;
    width: 80px; 
    height: 32px;
}

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>

Css. Doesn't work text-overflow: ellipsis

I have no idea why you need absolute position for the span tag, but it's doesn't matter here.

Span tag should have the "width" css-rule to solve your problem. For your example:

span {
   width:100%;
}

So every time you want to use overflow:ellipsis option you have to specify the width for target element.

Can't get text-overflow: ellipsis; to work

The problem with the code in the example is that the tables automatically enlarge and ignore the set width of 20px if there's more content then 20px.
Here's an example that works: http://jsfiddle.net/qKS8p/34/

I added:

span {
  display:block;
  width:inherit;
}

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 ellipsis doesn't show on flexbox item

For text-overflow: ellipsis to work, you must have a width defined. You have flex-basis: auto, which is not enough.

Also, text-overflow: ellipsis only works on block-level elements.

A flex item is considered blockified and ellipsis will work. However, you're also applying display: flex to the flex items, which breaks the block-level rule for the display property.

Try these adjustments:

ul {  display: flex;  height: 40px;  margin: 0;  padding: 0;  width: 100%;  list-style: none;}ul li {  /* display: flex;           <-- remove */  /* align-items: center;     <-- will no longer work */  height: 100%;  padding: 0 4px;  border-bottom: 1px solid #eee;}ul li:first-child {  width: 55px;  flex-shrink: 0;}ul li:first-child input {  width: 100%;}ul li:last-child {  width: 48px;  flex-shrink: 0;}ul li:nth-child(2) {  flex: 0 1 100px;              /* adjusted; 100px for demo only */  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  min-width: 0px;}ul li:nth-child(3) {  width: 75px;  flex-shrink: 0;}

<ul>  <li><input type="number" value="1"></li>  <li>A very long text description goes here</li>  <li>$99.90</li>  <li>Del</li></ul>

Text-overflow: ellipsis does not work as intendent. Spilling outside of view

Remove .maxWidth from .infoArea class and add .maxWidth class in .cellContent.

body {  width: 100px; } .displayInline {  display: inline; } .infoCellArea {  cursor: pointer;  display: table-cell;  width: 100px;  height: 4.0em;  overflow: hidden; } .infoArea {  height: 4.0em;  display: table-cell;  vertical-align: middle;  overflow: hidden; } .maxWidth {  width: 100px; } .inline {  display: inline; } .taskNameStyle {  font-weight: 500;  padding-right: 0.1em; } .dateStyle {  padding-left: 0.1em;  padding-right: 0.1em; } .titleStyle {  paddingLeft: 0.1em; } .cellContent {  -moz-box-sizing: border-box;  box-sizing: border-box;  overflow: hidden;  text-overflow: ellipsis;  font-size: 0.8571em;  color: #888; } .noWrap{  white-space: nowrap; }

<div tabindex="0" class="infoCellArea displayInline noWrap"> <div class="infoArea">  <div class="inline taskNameStyle">Test</div> -   <div class="inline dateStyle">Wednesday</div> -   <div class="inline titleStyle">Done</div>   <div class="cellContent maxWidth">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div> </div></div>

---

Related Topics