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>

  • 相关阅读:
    Redis命令总结
    jvisualvm远程监控Tomcat
    CentOS6安装glibc-2.14,错误安装libc.so.6丢失急救办法
    vsan分布式存储数据恢复全过程
    linux文件系统损坏修复方法,亲测可用
    案例讲解服务器硬盘离线数据恢复方法-数据恢复
    服务器数据丢失恢复过程
    数据恢复工程师讲述Linux服务器数据恢复过程
    了解这一点轻松解决Oracle数据库系统报错问题
    浅析RAID0/1安全差别及处理数据安全的应对方式
  • 原文地址:https://www.cnblogs.com/lcngu/p/5004629.html
Copyright © 2011-2022 走看看