zoukankan      html  css  js  c++  java
  • 文字显示省略号

    单行文字显示省略号:设置元素的宽度,然后用onbr标签里面放文字然后设置overflow为hidden然后设置text-overflow:ellipsis;

    多行文字显示省略号:(移动端)

    1. overflow : hidden;
    2. text-overflow: ellipsis;
    3. display: -webkit-box;
    4. -webkit-line-clamp: 2;
    5. -webkit-box-orient: vertical;
    浏览器兼容:比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;
    p {
        position:relative;
        line-height:1.4em;
        /* 3 times the line-height to show 3 lines */
        height:4.2em;
        overflow:hidden;
    }
    p::after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
        background:url(http://www.css88.com/wp-content/uploads/2014/09/ellipsis_bg.png) repeat-y;
    }
    具体实现网址:http://www.css88.com/archives/5206

    word-spacing(即字间隔):
    This is some text. This is some text.

    This is some text. This is some text.

    letter-spacing (字符间距):

    T h i s i s h e a d e r 4
  • 相关阅读:
    TinyOS在ubuntu 14.04下安装教程
    C++ STL标准入门
    C++ 模板
    多态
    C++继承
    C++类型转换 -- 由其他类型转换到自定义类型
    运算符重载
    友元
    typedef用法
    c++细节--section1
  • 原文地址:https://www.cnblogs.com/yanaweb/p/5067695.html
Copyright © 2011-2022 走看看