Firefox Text-Overflow with Nowrap Ignored (Chrome Works)

Firefox text-overflow with nowrap ignored (Chrome works)

The problem is that the Flexible Box Layout introduces the Implied Minimum Size of Flex Items:

To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto value as the initial value
of the min-width and min-height properties defined in
CSS 2.1.

That auto value computes to 0, except

on a flex item whose overflow is visible in the main
axis, when specified on the flex item’s main-axis min-size
property

In your case, the main axis is the horizontal one. Therefore, if you set overflow-x to anything but visible, min-width will compute to 0, which was the initial value before auto was introduced.

For example,

.wrapper {
    overflow: hidden;
}

.container {  position: absolute;  width: 150px;}.innercontainer {  position: relative;  padding-right: 25px;  margin-bottom: 10px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}.outerwrapper {  display: block;  height: 24px;  text-align: center;  font-size: 10px;  line-height: 24px;  margin-bottom: 5px;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  box-orient: horizontal;  -webkit-box-orient: horizontal;  flex-direction: normal;  -ms-flex-direction: normal;  -moz-flex-direction: normal;  -webkit-flex-direction: normal;}.wrapper {  flex: 1;  -ms-flex: 1 0 auto;  -moz-flex: 1;  -webkit-flex: 1;  -webkit-box-flex: 1;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  box-orient: horizontal;  -webkit-box-orient: horizontal;  flex-direction: normal;  -ms-flex-direction: normal;  -moz-flex-direction: normal;  -webkit-flex-direction: normal;  background-color: grey;  overflow: hidden;}.wrapper span {  display: block;  flex: 1;  -ms-flex: 1;  -moz-flex: 1;  -webkit-flex: 1;  -webkit-box-flex: 1;  text-align: left;  font-size: 10px;  padding: 0 5px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  color: #FFFFFF;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}

<div class="container">  <div class="innercontainer">    <section class="outerwrapper">      <div class="wrapper">        <span>          super long string in here super long string          in here super long string in here        </span>      </div>    </section>  </div></div>

Why doesn't text-overflow: ellipsis not work with display: inline-flex in Firefox?

I was able to reproduce your issue. Turns out the issue was with the display:inline-block; property. Below is the part that I modified:

#breadcrumbs a,
#breadcrumbs span {
  /*display: inline-block;*/
  text-decoration: none;
}

Here is the updated CodePen.

overflow:hidden on div in ordered list affects li, Chrome bug?

Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.

CSS

ol > li:before {
    content: '';
    display: block;
    height: 1px;
}

div {
    margin-top: -1px;
}

Demo

Try before buy

Cross-browser hinting for word break

Here's an implementation of a suggestion from @CBroe ...

.headline-container {  width: 70%;  border: 1px solid red;}.h1-line {  display: inline-block;}@media (max-width: 400px) {  .h1-line {    display: inline;  }}

<div class="headline-container">  <h1><span class="h1-line">This headline could</span> <span class="h1-line">wrap in the middle</span></h1></div>

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>

Weird issue with padding and whitespace: nowrap in Chrome and IE

Add display: inline-block; to p element:

http://jsfiddle.net/Fq68D/1/

---

Related Topics