码迷,mamicode.com
首页 > 其他好文 > 详细

文本溢出

时间:2016-01-09 21:40:30      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

1.介绍说明

移动端由于屏幕较小,能容纳的内容有限,所以对于文字可能常常需要用到文本省略,在具体介绍实现方法前,先了解一下相关属性:

word-break:break-all;//只对英文起作用,以字母作为换行依据
word-wrap:break-word;//只对英文起作用,以单词作为换行依据
white-space:pre-wrap;//对中英文作用,强制换行;

2.单行文本溢出

.single_e{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;//禁止换行
}

举个栗子:

准确的说,我是一个演员准确的说,我是一个演员

3.多行文本溢出

方案一:(适用于webkit浏览器或移动端页面)
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space:pre-wrap;

举个栗子:

原来那个女孩子在我心里留下了一滴眼泪,我完全可以感受到当时他是多么的伤心。


方案二:使用js

多行文本溢出js解决方案

文本溢出

标签:

原文地址:http://www.cnblogs.com/zhuz/p/5112844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!