CSS text-overflow ellipsis in the beginning of the the text - Left Ellipsis using CSS in a Flex box


If you want to have css text overflow ellipsis in the left (beginning of the text), there is no straight forward solution to get it working in all browsers (especially in Safari). There are several CSS tricks that you will end up only working few browsers. It will be further difficult, if you are trying to achieve this in flex container.


Combining few ideas found in the stack-overflow, manged to get it working in most of the browsers including safari.

".cont" is flex box and either you can set a width to it, or can inherit the width from parent container element.

  .ellipsis:after {
        content: "";
        background-color: white;
        color: transparent;
        position: relative;
        z-index: 2;
        min-width: 100%;
        display: inline-block;
        min-height: 1rem;
    .ellipsis {
        direction: rtl;
        display: inline-block;
        width: calc(100% - .1em);
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        z-index: 3;
    .ellipsis:before {
        background-color: white;
        position: absolute;
        left: 0;
        z-index: 1;
        padding-right: 2px;
        max-width: 200px;
        border: 1px solid black;

    <div class="cont">
      <span class="ellipsis">sdf s fsdf asdasd  sd asd asd asd fsfd sd sdfsdf sdf</span>
    <div class="cont">
      <span class="ellipsis">sdfs sdfsdf</span>


  1. Sands Casino: The Ultimate Guide to the Best - Seminole
    Sands Casino gioco digitale is a brand new way to experience gaming on our newest 샌즈카지노 The casino is fully operational and has over 우리카지노 3,000 slot games


Post a Comment

Popular posts from this blog

Selenium With .Net

Handling Exit Event of Console Application in C#