文档章节

css3文本溢出显示控制

w-rain
 w-rain
发布于 2016/01/08 15:21
字数 324
阅读 265
收藏 5

1.单行文本溢出显示省略号(…)

       设置元素为块级元素display:block,设置元素宽度width,设置overflow:hidden,设置文本溢出显示状态text-overflow:ellipsis; white-space是否在容器边界换行,nowrap不换行。

{
    display:block;
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;  
    -webkit-text-overflow:ellipsis;  
    -moz-text-overflow:ellipsis; 
     white-space:nowrap;
 }

2.多行文本溢出最后一行显示省略号(…)

在webki浏览器或移动端(绝大部分是webkit内核的浏览器)页面可以直接使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clamp。

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。

常见结合属性:

display:-webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性,设置或减少伸缩盒对象的子元素的排列方式。

text-overflow:ellipsis; 可以用来多行文本的情况下,用省略号“ ... ”隐藏超出范围的文本。

{
    width:200px;  
    word-break:break-all;  
    display:-webkit-box;  
    -webkit-line-clamp:3;  
    -webkit-box-orient:vertical;  
    overflow:hidden;
}

3.跨浏览器兼容方案

{
    width:200px;
    height:60px;
    line-height:20px;
    position:relative;
    overflow:hidden;
    &:after{
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 5px;
        background: #ffffff;
    }
}

注意:以上写法是less的语法。

© 著作权归作者所有

w-rain
粉丝 27
博文 54
码字总数 46502
作品 0
成都
程序员
私信 提问
20 个 CSS 高级技巧汇总

黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filte...

名字已被取
2016/03/15
130
0
CSS3 各类属性设置

字体 font-size smaller small medium large larger Npx N% 相对于父元素字体大小的百分比 font-variant normal 大写变小写 small-caps 小写变大写 font-style normal italic 倾斜 font-wei......

hakase
2016/09/19
13
0
重温大漠CSS3知识文本篇 text-overflow

当网页制作中遇到了文本内容溢出的问题,你会使用什么CSS3方法来处理呢?此时CSS3的text-overflow会帮助你解决这一个问题。- text-overflow:clip 实例1 效果 text-overflow:clip 实例2 效果 ...

聪少Jeff
2018/07/22
0
0
HTML 5 & CSS 3 的新交互特性

本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由 于图片的体积不算太小,可能网速慢的网友在浏览的时...

楚广明
2011/12/19
0
0
css滚屏效果,要比想象中的难

今天有一位掘友问我一个问题: 文字不换行,超出容器,怎么滚动显示? 比如下图中,有的列表项的文字短,有的文字长。 需求是:希望文字长的部分能通过动画滚动显示。 我的第一反应是用纯 CS...

老姚
03/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

矩阵中的路径

判断在一个矩阵中是否存在一条包含某字符串所有字符的路径。路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向上下左右移动一个格子。如果一条路径经过了矩阵中的某一个格子,则该路...

Garphy
12分钟前
3
0
Hibernate 5 Maven 仓库的 Artifacts

Hibernate artifacts 官方发布的仓库在 JBoss Maven repository 中。Hibernate 发布的 artifacts 也会同时同步到 Maven Central 仓库中,这是一个自动同步进程(可能会有一些延迟)。 Hibern...

honeymoose
今天
4
0
如何学习uni-app?

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序、H5等多个平台,保证其正确运行并达到优秀体验。 <templ...

达叔小生
今天
5
0
OSChina 周一乱弹 —— 后来马云就一心想挣钱了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑:《空帆船》- 朴树 《空帆船》- 朴树 手机党少年们想听歌,请使劲儿戳(这里) @webw :第二次被锁在电梯里了 上次你忘带电梯卡, ...

小小编辑
今天
862
14
关于does not give a valid preprocessing token

#define VFUNC(self) ((##self##)->_vptr) 这样在gcc下会编译失败, VC不会 报pasting ) does not give a valid preprocessing token 据说是因为版本问题 解法:去掉## define VFUNC(self) (......

shzwork
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部