1

I have a div that contains text on it and i needed to apply text-overflow: ellipsis; on that text while the div width should be width: fit-content; and its max-width: 100%; (the ellipsis is then supposed to show in case where the actual div width will be greater than its parent width's as the text will be too long in that case)

.tagWrap {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 26px;
 width: -moz-fit-content;
 width: fit-content;
 max-width: 100%;
 display: inline-block;
}

This works for long texts but for one word texts i found that the ellipsis is being applied too for no reason and as a consequence only the first letter or few letters of a word will shown!

.tagsWrapper{
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: flex-start;
 width:150px;
 border:1px solid green;
}
.tagWrap {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 26px;
 width: -moz-fit-content;
 width: fit-content;
 max-width: 100%;
 display: inline-block;
 border:1px solid red;
 margin-right:3px;
}
<div class="tagsWrapper">
 <div class="tagWrap">OneWordText</div>
 <div class="tagWrap">multi words text</div>
</div>

Here is a jsFiddle showing the issue : https://jsfiddle.net/bardelman/u13hb04j/1/

The one word div is placed at the left, it's not supposed to have the ellipis, the second div is the only one that should get the ellipsis as it goes beyong the parent right edge

Stacks Queue
1,3421 gold badge12 silver badges22 bronze badges
asked Aug 31, 2021 at 9:19
2
  • You're using flexbox, so both .tagWrap boxes are being made to fit in the 150px wide space available. Since, in both cases, their calculated width is too narrow for their contents, the ellipsis is applied. Commented Aug 31, 2021 at 9:32
  • i didn't expect it will be applied for both , if the first .tagWrap boxes was the only one in its parent it wouldn't be narrow. I'm looking for a css solution that makes only the last child to get the ellipsis if it's its own width that makes the whole content doesn't all fit inside the parent Commented Aug 31, 2021 at 10:28

1 Answer 1

2

If you want tags to take additional lines but add ellipsis just for tags that are bigger than the container - simply add flex-wrap: wrap.

.tagsWrapper{
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 justify-content: flex-start;
 align-items: flex-start;
 width:150px;
 border:1px solid green;
}
.tagWrap {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 26px;
 width: -moz-fit-content;
 width: fit-content;
 max-width: 100%;
 display: inline-block;
 border:1px solid red;
 margin-right:3px;
}
<!DOCTYPE html>
<html>
<body>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div><div class="tagWrap">OneWo</div>
<div class="tagWrap">multi words text</div>
<div class="tagWrap">OneWordTextOneWordTextOneWordText</div>
</div>
</body>
</html>

If you want some tags to take their width and limit others - you should somehow say browser about it. I.E. you can add flex-shrink: 0 to tags that should take their space.

.tagsWrapper{
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: flex-start;
 width:150px;
 border:1px solid green;
}
.tagWrap {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 26px;
 width: -moz-fit-content;
 width: fit-content;
 max-width: 100%;
 display: inline-block;
 border:1px solid red;
 margin-right:3px;
}
.tagWrap--noshrink {
 flex-shrink: 0;
}
<!DOCTYPE html>
<html>
<body>
<div class="tagsWrapper">
<div class="tagWrap tagWrap--noshrink">OneWordText</div>
<div class="tagWrap">multi words text</div>
</div>
</body>
</html>

If this doesn't answer your question - start by defining your desired logic "on paper", then it will be possible to translate your expected logic to code

Additional solution with :last-child

You don't need to set class that way, but it's still not automated and will not work if children before the last item are too long.

.tagsWrapper{
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: flex-start;
 width:150px;
 border:1px solid green;
 overflow: hidden;
}
.tagWrap {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 26px;
 width: -moz-fit-content;
 width: fit-content;
 max-width: 100%;
 display: inline-block;
 border:1px solid red;
 margin-right:3px;
 flex-shrink: 0;
}
.tagWrap:last-child {
 flex-shrink: 1;
}
<!DOCTYPE html>
<html>
<body>
<p>will work</p>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div>
<div class="tagWrap">multi words text</div>
</div>
<p>will not work</p>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div>
<div class="tagWrap">OneWordText</div>
<div class="tagWrap">multi words text</div>
</div>
</body>
</html>

Additional solution with fake ellipses (pseudoelement)

You don't need to set class that way, but it's still not automated and will not work if children before the last item are too long.

.tagsWrapper{
 position: relative;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: flex-start;
 width:150px;
 border:1px solid green;
 overflow: hidden;
}
.tagWrap {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 26px;
 width: -moz-fit-content;
 width: fit-content;
 max-width: 100%;
 display: inline-block;
 border:1px solid red;
 margin-right:3px;
 flex-shrink: 0;
}
.tagsWrapper::after {
 content: "...";
 display: inline-block;
 padding-left: 1px;
 position: absolute;
 right: 0;
 top: 1px;
 bottom: 1px;
 line-height: 26px;
 background-color: white; /* need to be replaced with tag bg */
}
<!DOCTYPE html>
<html>
<body>
<p>will work</p>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div>
<div class="tagWrap">multi words text</div>
</div>
<p>will not work (but there are some hacks to fix it)</p>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div>
</div>
</body>
</html>

If none of these solutions are working for you - I'll assume that it's not possible. A browser is a pure machine that interprets code, you should tell him exactly what to do and how to calculate it

answered Aug 31, 2021 at 9:38
Sign up to request clarification or add additional context in comments.

4 Comments

i want the same result as your second example with the .tagWrap--noshrink class but without the need to set it to each child that is not supposed to get the ellipsis. It's not possible ?
@Bardelman but how do you expect the browser to understand what block should be ellipsed? Are you able to interact with text from the backend or with the help of JS? What should happen when there are 2 long single words?
yes , i supposed the browser to be able to guess which element is overflowing and make the appropriate css behaviour accordingly. I'm able to interact with those texts and their elements but i don't wish make calculations on their widths to know which element is overflowing and where
@Bardelman I have added two more solutions, but still looks like you need some kind of "magic" from the browser, which is not possible to achieve

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.