zoukankan      html  css  js  c++  java
  • 纯css实现单行”截取“

    <!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" content="text/html; charset=utf-8" />
    <title>纯css实现单行”截取“</title>
    <style type="text/css">
    *{ font-size:14px;}
    
    .zxx_text_overflow_4{width:24em; height:1.3em; overflow:hidden; zoom:1;}
    .zxx_text_overflow_4 .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}
    .zxx_text_overflow_4 .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}
    
    </style>
    </head>
    <body>
    
    <div class="zxx_text_overflow_4">
        <div class="text_con">这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。</div>
        <div class="text_dotted"></div>
    </div>
    <div style="background:red; height:40px;">嘎嘎嘎</div>
    
    </body>
    </html>

      简要说明:当文字内容足够长 时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。 如果您不习惯用em做单位,直接换作px就可以了,效果是一样的。

    原文地址:http://www.zhangxinxu.com/wordpress/?p=230

  • 相关阅读:
    多线程-上
    IO流之序列化
    IO流之标准输入输出流
    IO流之BufferedReader/BufferedWriter
    IO流之转换流
    IO流之字符输入输出流
    IO流之字节输入输出流
    JS Flex布局
    MSSQL case when
    钉钉审批流API
  • 原文地址:https://www.cnblogs.com/siqi/p/3371320.html
Copyright © 2011-2022 走看看