文字溢出时如何使溢出部分显示为 ...

css方式:

单行溢出


<html>
<head> 
<meta charset="utf-8">
<title>text-overflowtitle>
<style type="text/css">
.test_demo{
    text-overflow:ellipsis;//值为clip表示剪切,ellipsis时为显示省略号
    overflow:hidden; 
    white-space:nowrap; 
    width:200px; 
    background:#ccc;
}
style>
head> 
<body>
<div class="test_demo">
  超酷的IT技术学习平台(我是省略号)
div>
body>
html>

文字溢出时如何使溢出部分显示为 ..._第1张图片

同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。关于word-wrap:break-word和word-break:break-all,可以看这个网址,很详细:你真的了解word-wrap和word-break的区别吗?

多行溢出
针对webkit内核的浏览器以及Opera浏览器:


<html>
<head> 
<meta charset="utf-8">
<title>text-overflowtitle>
<style type="text/css">
.test_demo{ 
    text-overflow:ellipsis;  
    overflow:hidden; 
    width:200px; //指定宽度
    background:#ccc;  
    display:-webkit-box;  
    -webkit-box-orient:vertical;  
    -webkit-line-clamp:3; //指定显示多少行
}
style>
head> 
<body>
<div class="test_demo">
  超酷的IT技术学习平台(我是省略号术学习平台(我是省略号我是省略号术学习平台(我是省略我是省略号术学习平台(我是省略
div>
body>
html>

文字溢出时如何使溢出部分显示为 ..._第2张图片
对于其他浏览器:比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现

p {

  position: relative;

  line-height: 1.4em;

  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://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;

}

这里注意几点:

height高度正好是line-height的3倍;

结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;

IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用去模拟;

要支持IE8,需要将::after替换成:after;

js插件方式:

更为好用的是使用jQuery插件-jQuery.dotdotdot:

$('.news-left-text').dotdotdot();//先要引入jquery.dotdotdot.js,然后选择文本段落,使用dotdotdot方法

你可能感兴趣的:(前端开发)