Hide overflow of inline element [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
How can the following be achieved (purely in CSS)?
In a block of fixed width:
display text, and an other character/image (✤) after it.
However, when text is too long, hide its overflow,
while still displaying the character/image (✤) after it.
Visually:
It should not:
wrap the text
grow the block
hide the character/image (✤)
always display the character at right
Markup (but feel free to suggest using other markup if that helps):
<div class=outer>
<span class=copy>Text abc def ghi jkl mno pqr stu</span>
<span class=symbol>✤</span>
</div>

Answer 1

Here is a solution using positioning - you can notice that when the text is short, the symbol will stay to the right end:
div {
border: 1px solid red;
padding 10px;
padding-right: 15px;
white-space: nowrap;
overflow:hidden;
width: 100px;
text-overflow: ellipsis;
position: relative;
}
div:after {
content: '✤';
position: absolute;
right:0;
}
<div>well, some text here</div>
<div>text here</div>
Here is a solution using flexbox where I got it working fully:
div {
border: 1px solid red;
padding 10px;
width: 100px;
display: flex;
}
div span {
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
div:after {
content: '✤';
padding-left: 5px;
}
<div><span>well, some text here</span></div>
<br/>
<div><span>text here</span></div>

Answer 2

With the idea that your block has a fixed width, I'd just display the extra character/image with a position: absolute; as per:
Extra char as Pseudo-Element
div {
position: relative;
display: inline-block;
padding: 5px;
padding-right: 25px;
border: 2px solid black;
width: 150px;
}
span {
position:relative;
display: inline-block;
padding-right: 20px;
max-width: 100%; /* or 120px or whatever you want */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
span:after {
content: '★';
position: absolute;
top: -2px;
right: 0px;
}
<div>
<span>text text text</span>
</div>
Declared the extra icon as a pseudo-element.
https://jsfiddle.net/6stc9hf0/1/
Different approach still considering declared static widths
div {
position: relative;
display: inline-block;
padding: 5px;
padding-right: 25px;
border: 2px solid black;
width: 150px;
}
.text {
position:relative;
display: inline-block;
max-width: calc(100% - 20px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icon {
position: relative;
top: -2px;
right: 0px;
}
<div>
<span class="text">text text text text</span>
<span class="icon">★</span>
</div>
https://jsfiddle.net/6stc9hf0/2/