Css. Doesn't work text-overflow: ellipsis

Question

I have something like this:

<div>
  <span>
    text text text text text text
  </span>
</div>

div{
  width:100px;
  border: 1px solid black;
  line-height: 12px;
  height: 16px;
  position: relative;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

span{
  position: absolute;
  overflow: hidden; 
  text-overflow: ellipsis;
}

And ellipsis doesn't work. I do not necessarily need to use position: absolute, but as result I should have text, that doesn't expand div and truncated width ellipsis.

P.S. Width for div is included for sample, in reality div width is unknown.

Your jsfiddle is different than your question.

DigitCart
– DigitCart

2017-12-08 12:06:37 +00:00
Commented Dec 8, 2017 at 12:06 — DigitCart
– DigitCart, Commented Dec 8, 2017 at 12:06
jsfiddle.net/t8bnfr9s/3

pavel
– pavel

2017-12-08 12:07:04 +00:00
Commented Dec 8, 2017 at 12:07 — pavel
– pavel, Commented Dec 8, 2017 at 12:07
See this tutorial, it actually covers most cases.

InfiniteStack
– InfiniteStack

2022-08-24 03:13:18 +00:00
Commented Aug 24, 2022 at 3:13 — InfiniteStack
– InfiniteStack, Commented Aug 24, 2022 at 3:13

Vitaly Matvievich · Accepted Answer · 2017-12-08 12:09:54Z

1

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.

answered Dec 8, 2017 at 12:09

Vitaly Matvievich

913 bronze badges

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

Comments

KL_ · Accepted Answer · 2017-12-08 12:07:29Z

1

Try adding width: 100% to your span:

div{
  width:100px;
  border: 1px solid black;
  line-height: 12px;
  height: 16px;
  position: relative;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

span{
  position: absolute;
  width: 100%;
  overflow: hidden; 
  text-overflow: ellipsis;
}

<div>
  <span>
    text text text text text text
  </span>
</div>

answered Dec 8, 2017 at 12:07

KL_

1,5131 gold badge10 silver badges13 bronze badges

Comments

DigitCart · Accepted Answer · 2017-12-08 12:13:10Z

0

text-overflow: ellipsis; affects when it does not have enough space for the text.

div {
	width: 100px;
	border: 1px solid black;
	line-height: 12px;
	height: 16px;
}
span {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	white-space: nowrap;
}

<div>
  <span>
    text text text text text text
  </span>
</div>

answered Dec 8, 2017 at 12:13

DigitCart

3,0202 gold badges20 silver badges28 bronze badges

Collectives™ on Stack Overflow

Css. Doesn't work text-overflow: ellipsis

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related