• 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)


      写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情。语法如下:

      text-overflow: clip|ellipsis|string;
      
    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>demo</title>
    <style>
    div{
    white-space: nowrap;   //规定段落中的文本不进行换行
    text-overflow:ellipsis;
    overflow:hidden;
    }
    div:hover{
    overflow: visible;
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <div style="100px;border:1px solid red;">
    <a href="#">文本文本文本文本文本文本文本</a>
    </div>
    </body>
    </html>



     

     

  • 相关阅读:
    文件
    drf序列化组件
    drf入门规范
    单例模式
    初识drf
    restful规范
    虚拟环境使用
    vue基础(三)
    vue基础(二)
    作业
  • 原文地址:https://www.cnblogs.com/jizhongjing/p/4847600.html
Copyright © 2020-2023  润新知