zoukankan      html  css  js  c++  java
  • css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;

    重点代码:text-overflow: ellipsis;

    解释:简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。

    text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

    <html>
    <head>
        <title> css 超出部分显示省略号</title>
    </head>
    <body>
        <div id="div1" style=" 100px; background: #ccc; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; ">省略号啊省略号啊省略号啊</div>
        重点样式是  text-overflow: ellipsis; <br />
    
        text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的
    
    效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。
    
        简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( 
    
    text-overflow: ellipsis)。
    </body>
    </html>
  • 相关阅读:
    paraview将csv格式显示为云图
    Valgrind安装与使用
    vscode+WSL+Debug+Cmake+OpenGL
    MFiX中DEM颗粒信息随时间变化
    origin添加两个Y轴
    conda回滚
    onedrive同步其他任意文件夹
    MFiX-DEM中的并行碰撞搜索
    MFiX-DEM中的串行碰撞搜索
    【Go】四舍五入在go语言中为何如此困难
  • 原文地址:https://www.cnblogs.com/mmcmmc/p/3945798.html
Copyright © 2011-2022 走看看