zoukankan      html  css  js  c++  java
  • CSS3 文本超出后显示省略号...

    纯用CSS实现,主要采用代码

    overflow:hidden;

    text-overflow:ellipsis;//这是让文本溢出后,显示成省略号。

    white-space:nowrap;//禁止自动换行

    栗子html

    <div class="div1">    ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
    </div>

    栗子的css

    .div1{
                 100px;
                height: 100px;
                border:2px solid black;
                overflow:hidden;
                text-overflow: ellipsis;
                /*-webkit-text-overflow:ellipsis;*/
                white-space: nowrap;
            }

    在ie6~8和chrome下显示都是:

    鼠标悬停时显示被省略的内容:

    设置CSS

    .div1:hover{
                overflow:visible;
            }

    另外:由于这个只是针对溢出文本的效果。所以如果div内是p元素,那么溢出的p元素不会显示成...。至少在ie8+,和chrome中,p元素并不会变成省略号,而是直接被裁剪掉了。

    用ietester测试ie6、7则会显示溢出的P元素为省略号。

    所以,若想要P元素溢出后也显示成省略号效果,需要单独给p元素设置over-flow:hidden;text-overflow:ellipsis;

    ps:关于text-overflow的值:有三个值:

    clip|ellipsis|string 默认clip

    描述 
    clip 修剪文本。  
    ellipsis 显示省略符号来代表被修剪的文本。  
    string 使用给定的字符串来代表被修剪的文本。


  • 相关阅读:
    Nginx lingering_close延迟关闭
    Nginx 减少关闭连接的time_wait端口数量
    Tcp协议的keepalive功能
    Nginx 慢启动与拥塞窗口
    Nginx 优化缓冲区与传输效率
    linux 目录分类与文件操作
    Nginx 滑动窗口与缓冲区
    python 关键字yield
    模块与包
    面向对象
  • 原文地址:https://www.cnblogs.com/hamsterPP/p/4958973.html
Copyright © 2011-2022 走看看