CSS text-overflow: ellipsis; does not work properly or pushes d-flex content to max width

In my html structure I use Bootstrap flex and I faced a problem with text-overflow: ellipsis; and the classic way of making it.

What is text-overflow: ellipsis;? text-overflow: ellipsis; makes sure that if the sentence is longer than its block, it puts ... and makes sure that the sentence only takes up one line, rather than several. To make text overflow its container, you need to set other CSS properties: overflow and white-space.

The problem arose because my left column uses a variable width in flex, which fills up in proportion to the width of the opposite column. But my css class for text-overflow with white-space: nowrap; made the left column 100% in width and pushed col-md-3 behind it. The culprit was white-space: nowrap;, I can't quite explain how it inside another container can be allowed to push its parent frame, but it happened and the below fixed it.

My html structure frame. Inside each column is the content which does not determine the width of this parent frame itself, but is given a max width by its parent


<div class="row">
<div class="col-md"></div>
<div class="col-md-3"></div>
</div>


Watch video of fix



Classic CSS class for ellipsis overflow that caused the error


.overflow-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 

Better procedure to ensure that overflow does not occur


.overflow-txt {
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
}

hmm 🙄 My text gets cut off at the top, so I'm missing the ball above the Å ...
If your CSS `line-height` is close to 1 and special characters like "Å" are cropped at the top, it's because of `overflow: "hidden"`. You can fix this by adding a bit of padding-top to your text. This trick creates a visual air at the top of the letters so they don't get cut off and you can maintain the line-height you prefer.