Is there any way to get the following HTML behave so that:
- The text is center-aligned vertically
- 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>