How to cut overflow on the left side

I can cut the overflowing content on the right side, as shown below:

HTML

<div>Hello World!</div> 

CSS

 div{width:50px; background: red; overflow: hidden; white-space: nowrap;} 

Result

cut off on the right side

How can I disable it on the left side?

+3
source share
2 answers

Just change the direction of the text from right to left to direction: rtl;

 div { width:50px; background: red; overflow: hidden; white-space: nowrap; direction: rtl; } 

WORKING DEMO .

It should be noted that, by changing direction , the exclamation point is Hello World! go left like !Hello world .

To fix this, you can wrap the <bdi> text as follows:

 <div> <bdi>Hello World!</bdi> </div> 

UPDATED DEMO .

Or use unicode-bidi: isolate for the <span> element (for supported web browsers)

+4
source

Just set the direction property to rtl:

 div{ direction:rtl; width:50px; background: red; overflow: hidden; white-space: nowrap; } 

Working example: http://jsfiddle.net/5Hj3Q/

+3
source

Source: https://habr.com/ru/post/975766/


All Articles