Text Overflow - Prevent from clipping letters in half

Question

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>

Answer 1

.test {
  width: 44px;
  height: 18px;
  word-break: break-all;
  overflow: hidden;
  border: 1px solid #000000;
}

<div class="test">HelloWorld!</div>

Answer 2

You can consider ellipsis instead of clip:

.test {
  white-space: nowrap;
  width: 44px;
  overflow: hidden;
  text-overflow: clip;
  border: 1px solid #000000;
}

.test2 {
  width: 44px;
  overflow: hidden;
  border: 1px solid #000000;
}

.test2>span {
  display: block;
  width: calc(100% + 10px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="test">HelloWorld!</div>

<div class="test2"><span>HelloWorld!</span></div>
<div class="test2"><span>Sometext</span></div>
<div class="test2"><span>Myname</span></div>

UPDATE

You can also consider word-break but in this case you need to have a fixed height also:

.test {
  width: 44px;
  height:20px;
  overflow: hidden;
  word-break:break-all;
  border: 1px solid #000000;
}

<div class="test">HelloWorld!</div>
<div class="test">Myname</div>
<div class="test">sometext!</div>