zoukankan      html  css  js  c++  java
  • 用CSS做长度超过长度显示‘...’,当鼠标放上时显示全部内容

    <!DOCTYPE html>

    <html>

    <head>

    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

    <title>文本相关属性设置</title>

    <style type="text/css">

    /* 为div元素增加边框 */

    div{

    border:1px solid #000000;

    height: 30px;

    200px;

    }

    </style>

    </head>

    <body>

    text-overflow:ellipsis <tr><td style="overflow:hidden;white-space:nowrap

    ;text-overflow:ellipsis;"title="测试文字测试文字测试文字测试文字测试文字测试文字">测试文字测试文字测试文字测试文字测试文字测试文字</td></tr>

    </body>

    </html>

    <!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>文本相关属性设置</title><style type="text/css">/* 为div元素增加边框 */div{border:1px solid #000000;height: 30px; 200px;}</style></head><body><!-- 缩进20pt -->text-indent:20pt <div style="text-indent:20pt">测试文字</div><!-- 缩进20pt -->text-indent:40pt <div style="text-indent:40pt">测试文字</div><!-- 居中对齐 -->text-align:center <div style="text-align:center">测试文字</div><!-- 居右对齐 -->text-align:right <div style="text-align:right">测试文字</div><!-- 文本从右边流入 -->direction:rtl <div style="direction:rtl">测试文字</div><!-- 文本从左边流入 -->direction:ltr <div style="direction:ltr">测试文字</div><!-- 强制不换行,直到遇到br标签 -->white-space:nowrap <div style="white-space:nowrap">测试文字,疯狂Java讲义,疯狂XML讲义</div><!-- 当文字溢出时,只是简单地裁切 -->text-overflow:clip <div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">测试文字测试文字测试文字测试文字测试文字测试文字</div><!-- 当文字溢出时,裁切之后显示裁切标记 -->text-overflow:ellipsis <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">测试文字测试文字测试文字测试文字测试文字测试文字</div>text-overflow:ellipsis <tr><td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;200px;">测试文字测试文字测试文字测试文字测试文字测试文字</td></tr></body></html>

  • 相关阅读:
    洛谷P3959 宝藏(状压dp)
    洛谷P3645 [APIO2015]雅加达的摩天楼(最短路+分块)
    洛谷P3646 [APIO2015]巴厘岛的雕塑(数位dp)
    洛谷P4770 [NOI2018]你的名字(后缀自动机+线段树)
    洛谷P4768 [NOI2018]归程(克鲁斯卡尔重构树+最短路)
    hive3.1.1 hive-site.xml
    mysql 远程连接数据库的二种方法
    linux彻底干干净净完全卸载 mysql
    jdk环境变量配置
    Eclipse常用快捷键
  • 原文地址:https://www.cnblogs.com/lcngu/p/5004629.html
Copyright © 2011-2022 走看看