• 用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>

  • 相关阅读:
    SDWebImage源码解读之SDWebImageDownloader
    Swift 中函数使用指南
    SDWebImage源码解读之SDWebImageDownloaderOperation
    Swift enum(枚举)使用范例
    用C语言封装OC对象(耐心阅读,非常重要)
    终端mysql Operation not permitted错误解决方案
    SDWebImage源码解读之SDWebImageCache(下)
    SDWebImage源码解读之SDWebImageCache(上)
    SDWebImage源码解读_之SDWebImageDecoder
    递归的本质
  • 原文地址:https://www.cnblogs.com/lcngu/p/5004629.html
Copyright © 2020-2023  润新知