CODEWITHSUNDEEP
htmlcssselectiontextselection
Дмитрий Лэнь
Дмитрий Лэнь

Reputation: 1

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.

Upvotes: 0

Views: 81

Answers (2)

bZezzz
bZezzz

Reputation: 1002

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>

Upvotes: 2

diopside
diopside

Reputation: 3062

You can always use text-align justify, but of course that comes with its own peculiarities and issues.

div {
  width: 200px;
  border: 1px solid green; 
  text-align: justify;  
  text-align-last: left;
  overflow: hidden  /* if you dont want it to overlap the boundaries */
}

I don't think I've ever seen such a minimal code fiddle on stack overflow, lol. If you can reduce your problem down to this little markup, I would consider that your client is just unhappy with how HTML renders text in general. :P

enter image description here

Upvotes: 1

Related Questions