代码之家  ›  专栏  ›  技术社区  ›  sawa

如何切断左侧的溢流

  •  4
  • sawa  · 技术社区  · 11 年前

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

    HTML格式

    <div>Hello World!</div>
    

    CSS格式

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

    后果

    cut off on the right side

    我怎样才能把它从左边剪掉?

    2 回复  |  直到 11 年前
        1
  •  9
  •   Hashem Qolami    11 年前

    只需将文本的方向更改为 从右到左 通过 direction: rtl;

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

    WORKING DEMO .

    我应该注意到,通过更改 direction ,的感叹号 Hello World! 将向左移动 !Hello world .

    为了解决这个问题,您可以通过 <bdi> 元素如下:

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

    UPDATED DEMO .

    或使用 unicode-bidi: isolate <span> 元素(用于 supported web浏览器)

        2
  •  3
  •   Roxana    11 年前

    只需将direction属性设置为rtl:

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

    工作示例: http://jsfiddle.net/5Hj3Q/