zoukankan      html  css  js  c++  java
  • CSS控制LI行字符溢出用省略号取代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
    <title>CSS控制一行字符溢出用省略号取代</title>
    <style>
    * { margin: 0; padding: 0; }
    a { text-decoration: none; color: #000; }
    a:hover { text-decoration: none; color: #000; }
    ul { 280px;height:126px; margin: 38px auto;padding: 12px 6px 12px 22px;border: 1px solid #CCC;background: #EEE;}
    li { margin: 12px 0; }
    li a {display: block; 168px;overflow: hidden;/*不能写在最后*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
    /* firefox only */
    li:not(p) {clear: both;}
    li:not(p) a {max- 172px;float: left;}
    li:not(p):after {mrc: "...";float: left; 25px;padding-left: 5px;color: #000;}
    </style>
    </head>


    <body>
    <ul>
    <li><a href="/soft/3149.shtml" target="_blank">显示内容1,显示内容1,显示内容1,显示内容1</a></li><li><a href="/soft/3148.shtml" target="_blank">显示内容2,显示内容2,显示内容2,


    显示内容2</a></li><li><a href="/soft/3147.shtml" target="_blank">显示内容3,显示内容3,显示内容3,显示内容3</a></li><li><a href="/soft/3144.shtml" target="_blank">显示内容4,


    显示内容4,显示内容4,显示内容4,显示内容4</a></li>
    </ul>
    <div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
    </body>
    </html>
  • 相关阅读:
    Vulnhub系列:Tomato(文件包含getshell)
    Linux基础之终端、控制台、tty、pty简介说明
    linux服务器之间传输文件的四种方式
    Vulnhub系列:Os-hackNos
    [GXYCTF2019]BabyUpload
    CVE-2018-12613
    [MRCTF2020]Ez_bypass
    [BUUCTF 2018]Online Tool
    [BJDCTF 2nd]fake google
    [网鼎杯 2020 青龙组]AreUSerialz
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5302991.html
Copyright © 2011-2022 走看看