zoukankan      html  css  js  c++  java
  • 文本溢出 | 单行文本溢出显示省略号

    文本溢出

    溢出属性

        语法:overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit
        
        visible:默认值,内容不会被修剪,会呈现在元素框之外;
        hidden:内容会被修剪,并且其余内容是不可见的;
        scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
        auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;
        inherit:规定应该从父元素继承 overflow 属性的值(ie浏览器不支持此属性值) 。
    

    空余空间

        语法:white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit
        
        该属性用来设置如何处理元素内的空白;
        normal:默认值,空白会被浏览器忽略,
        pre:空白会被浏览器保留,其行为方式类似HTML中的pre标签;
        pre-wrap:保留空白符序列和换行符,但是正常的进行换行(碰到边缘);
        pre-line:合并空隔符,但是保留换行符;
        nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止;
    

    文本溢出

        语法:text-overflow:clip/ellipsis
        
        取值:
        clip:不显示省略号(...),而是简单的裁切;
        ellipsis:当对象内文本溢出时,显示省略标记;
    

    总结

        text-overflow属性仅是...,当文本溢出时是否显示省略标记,
        并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
        1、容器宽度:width:value;
        2、强制文本在一行内显示:white-space:nowrap;
        3、溢出内容为隐藏:overflow:hidden;
        4、溢出文本显示省略号:text-overflow:ellipsis;
  • 相关阅读:
    pip安装pyinstaller失败的解决方法
    导药仪端子接线方式
    聊聊信号的回勾和过冲(转)
    玩不好触发,就不算会用示波器
    TI DS125BR401A 官方DEMO板鉴赏+学习+分析
    导药仪射频卡连接线制作方式
    解决ISE14.7在win10中不稳定的问题
    VS2013编译VTK7.1.1
    QT5.8.0与VS2013环境配置
    The Architecture of Open Source Applications---VTK
  • 原文地址:https://www.cnblogs.com/pp-yang/p/11976494.html
Copyright © 2011-2022 走看看