0

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.

Improve this question
3
  • Your jsfiddle is different than your question. Commented Dec 8, 2017 at 12:06
  • jsfiddle.net/t8bnfr9s/3 Commented Dec 8, 2017 at 12:07
  • See this tutorial, it actually covers most cases. Commented Aug 24, 2022 at 3:13

3 Answers 3

Reset to default
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.

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

Comments

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>

Improve this answer

Comments

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.