htmlcssselectiontextselection

Right indent of the selection in HTML


Faced the problem, there is an indent on the right side of the selected text in Chrome and Mozilla. Safari doesn't have such.

Checked other sites and it seems to be a default browser behaviour.

Is anyone aware about how to get rid of it?

Sandbox example: https://codepen.io/Steep1692/pen/Yzxvgdz

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa architecto natus modi saepe dolore nihil earum nostrum vero molestias nesciunt minima quis culpa, dolores excepturi error nemo! Impedit, beatae enim!</div>

div { width: 200px; border: 1px solid green; }

Pictures examples are below:

The problem is in the differing side indents. They annoys the client.


Solution

  • Use overflow:hidden

    The overflow property specifies what should happen if content overflows an element's box.

    This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

    div {
      width: 200px;
      border: 1px solid green; 
      text-align: justify;  
      text-align-last: left;
      overflow:hidden;
    } 
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa architecto natus modi saepe dolore nihil earum nostrum vero molestias nesciunt minima quis culpa, dolores excepturi error nemo! Impedit, beatae enim!</div>