如何切断左侧的溢流 [英] How to cut off overflow on the left side

问题描述

我可以切断右侧溢出的内容，如下所示：

HTML
$ b

 < div> Hello World！< / div> 
  

CSS

  DIV {宽度：50像素;背景：红色;溢出：隐藏; white-space：nowrap;} 
  

结果

我怎样才能在左边剪掉它？

解决方案

只要将文字的方向改为由方向：rtl;

从右至左 prettyprint-override> div {
width：50px;
背景：红色;
overflow：hidden;
white-space：nowrap;
方向：rtl;
}


WORKING DEMO 。

我应该注意，通过更改方向， Hello World！的感叹号会以的方式出现！Hello world 来包装文本。 / web / HTML / Element / bdirel =nofollow> < bdi> 元素如下：



 < div> 
< bdi> Hello World！< / bdi> 
< / div> 
  

UPDATED DEMO 。





或者使用上的 unicode-bidi：isolate ， < span> 元素（支持网页浏览器）

I can cut off the overflowed content on the right side, as follows:

HTML

<div>Hello World!</div>

CSS

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

Result

How can I cut it off on the left side?

解决方案

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

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

WORKING DEMO.

I should note that by changing the direction, the exclamation mark of Hello World! will go to the left as !Hello world.

In order to fix that, you could wrap the text by <bdi> element as follows:

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

UPDATED DEMO.

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

这篇关于如何切断左侧的溢流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！