Issue
For my situation, I have a fixed width in which I can show a name. If the name is too long, then I need to clip/hide the name.
The issue I am having is the last letter is being cut in half, whereas I would only like that last whole letter to show.
In the example below for "HelloWorld!", the 'W' is cut in half. Instead I need it to ignore that partial letter and just show "Hello". Is this even possible with just CSS?
.test {
white-space: nowrap;
width: 44px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
<div class="test">HelloWorld!</div>
Solution
.test {
width: 44px;
height: 18px;
word-break: break-all;
overflow: hidden;
border: 1px solid #000000;
}
<div class="test">HelloWorld!</div>
Answered By - Roman Maksimov
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.