Chrome update affects CSS text-overflow in relation to text-indent

Question

In Chrome, the indented (text-indent) version of an item with text-overflow no longer behaves the same as it used to.

Previous to the Chrome version 77.0.3865.75, indented text would still show an ellipsis. I can see that in the changes they've modified the way text-overflow works in the Chromium project.

In Firefox, Safari, and Edge, the indentation still works the same as it used to (see Codepens below for testing)

My questions:

Any ideas about a good way to solve this issue?
For my own education, is this a Chromium bug or are the other browsers not following spec?

Examples:

Given this HTML:

<div>
  <h1>A long title over a character limit</h1>
  <h1 class="indent">A long title over a character limit</h1>
</div>

And CSS:

div {
  width: 25em;
  background: #ccc;
  padding: 1em;
}

h1 {
  max-width: 100%;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

h1.indent {
  text-indent: 2em;
}

We see that in Chromium-based browsers, the h1.indent version of the title does not have an ellipsis.

Again in Firefox and other browsers, the text-overflow works as expected. In newer Chromium-based browsers it doesn't. Screenshot:

Here is a copy of the HTML/CSS in a codepen: https://codepen.io/camsjams/pen/yLBGBvP

Here is a codepen showing this in an HTML table: https://codepen.io/camsjams/pen/dybwbWr

Nick · Accepted Answer · 2020-01-26 15:04:08Z

1

Chrome Version 79.0.3945.130 (Official Build) (64-bit) is behaving now in another unexpected way.

Issue: using text-indent, overflow:hidden (required to use text-overflow:ellipsis) and text-overflow:ellipsis together pushes ellipsis out of visible space based on text-indent value.

Here is some basic CSS and HTML showing the behavior and a screenshot below that.

<style>
	#test1{
		text-indent:1px;
	}
	#test2{
		text-indent:10px;
	}
	.ellipsis{
		border:1px solid #000;
		width:200px;
		margin:50px;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
</style>

<div id="test1" class="ellipsis">
	Here is some really long text for testing purposes
</div>
<div id="test2" class="ellipsis">
	Here is some really long text for testing purposes
</div>

Results in Chrome at above mentioned version:

answered Jan 26, 2020 at 15:04

Nick

334 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cameron Over a year ago

Hi Nick - In Chrome versions Version 81.0.4044.92 or newer, the bug you posted is fixed!

Cameron · Accepted Answer · 2020-04-14 16:32:40Z

1

This was caused by a change in Chrome, and has been fixed in the Chromium development channel.

Here is the bug I had made on the Chromium issues site: https://bugs.chromium.org/p/chromium/issues/detail?id=1006395#c5

I will update with proper version number once the release is finalized.

Update: In Chrome versions Version 81.0.4044.92 or newer, this bug is fixed!

edited Apr 14, 2020 at 16:32

answered Dec 20, 2019 at 18:56

Cameron

1,52411 silver badges22 bronze badges

Collectives™ on Stack Overflow

Chrome update affects CSS text-overflow in relation to text-indent

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related