<div class="wrapper">
<div class="overflow-ellipsis">This text is truncated, because there is not enough space to display it completely.</div>
</div>

.wrapper {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background: #4776e6;
background: -webkit-linear-gradient(to right, #4776e6, #8e54e9);
background: linear-gradient(to right, #4776e6, #8e54e9);
}
.overflow-ellipsis {
width: 200px;
background-color: #fff;
padding: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}