html - Setting ellipsis on text from a flex container

Question

Is there any way to get the following HTML behave so that:

1. The text is center-aligned vertically
2. The text is a single line, and truncates with ... (ellipsis)

I can get either 1 or 2, but not both.

Please note, HTML cannot be modified, it's generated by a third-party library. We only have ability to change css.

.target {

  width: 300px;
  height: 50px;
  border: solid 1px red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex; /*change to block for ellipsis*/
  align-items: center;
  
}

<label class="target">
  Text here is very very long that it might get truncate if this box get resized too small
</label>

Answer 1

The ellipsis need to be set on the text element, not on the container:

.target {
  display: flex;
  align-items: center;
  width: 300px;
  height: 50px;
  border: solid 1px red;
  white-space: nowrap;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

<label class="target">
  <span>Text here is very very long that it might get truncate if this box get resized too small</span>
</label>