文字超出部分用省略号显示

单行文本的情况：

css:

<span style="font-family:Microsoft YaHei;font-size:14px;">        .single-line{width: 200px;height: 40px;border: solid 1px #000000;overflow: hidden;/*文本不换行*/white-space: nowrap;/*文字超出用省略号*/text-overflow:ellipsis;}</span>

body:

<span style="font-family:Microsoft YaHei;font-size:14px;"><div class="single-line">单行文字超出 单行文字超出 单行文字超出 单行文字超出 单行文字超出 单行文字超出
</div></span>

----------------------------------------------------------------------------------------------

多行文字超出：

CSS方式一：

css:

<span style="font-family:Microsoft YaHei;font-size:14px;">        .multi-line{width: 200px;border: solid 1px #000000;margin-top: 50px;overflow: hidden;/*文字超出用省略号*/text-overflow:ellipsis;/*盒子模型*/display:-webkit-box;/*显示的文本行数*/-webkit-line-clamp:3;/*子元素的垂直排列方式*/-webkit-box-orient:vertical;}</span>

这种方式挺方便的，就是不能兼容所有浏览器。

---------------------------------------------------------------------------------------------------------------

CSS方式二

自己创建一个带省略号的DIV然后用absolution的定位方式，放置到右下角。

css:

<span style="font-family:Microsoft YaHei;font-size:14px;">        .custom{height: 100px;width:200px;position: relative;overflow: hidden;line-height: 20px;}.custom:before{height: 15px;line-height: 5px;position: absolute;content: "...";right: 0px;bottom: 0px;background: #FFFFFF;/*padding: 4px;*/}</span>

全用这种方式的效果如果图，右下角省略号的DIV还需要根据具体的字间距等情况进行调整。所以也挺麻烦的。不爱用

-----------------------------------------------------------------------------------------------------

JS方法：

使用Clamp.js

使用Clamp.js下载地址https://github.com/josephschmitt/Clamp.js

首页头部引入Clamp.js

 <script src="Clamp.js-master/Clamp.js-master/clamp.js" type="text/javascript"></script>

<script>
//    clamp——规定文本显示的行数，
//    useNativeClamp——是否使用-webkit-line-clamp属性，
//    trucationChar——省略的部分使用的符号（不限于省略号），
//    truncationHTML——省略的部分显示的内容（不限于符号），
//    animate——是否实现动画折叠。var cla=document.getElementById("clamp");$clamp(cla, {clamp: 3,useNativeClamp: false,truncationChar:' ',truncationHTML:'<span style="color: red">Read more.</span>',animate:false});
</script>

精简一点：

    $clamp(cla, { clamp: 3 });即可

-----------------------------------------------------------------------------------------------------------------
使用jquery的插件：jQuery.dotdotdot

css:

 div{width: 250px;height: 110px;border: solid 1px #F4606C;}

JS：

    <script src="../../jquery-1.11.3.min.js" type="text/javascript"></script><script src="jQuery.dotdotdot-master/src/jquery.dotdotdot.js" type="text/javascript"></script>
<script>$(function(){$("#div1").dotdotdot();})
</script>

使用jQuery.dotdotdot，不用设定行数，它会根据你DIV的高度，当超出的时候自己加入省略号

这种jQuery.dotdotdot还有更多使用方式：http://blog.csdn.net/qq_30668579/article/details/51177126

文字超出部分用省略号显示相关推荐

CSS文字超出部分用省略号代替，js鼠标悬停时显示全部文本
需求: 宽度为百分比,随浏览器变化而变化,当窗口变小到一定程度,文字超出部分用省略号代替,当文字出现省略号,需要鼠标悬停时显示全部文本. 文字超出部分用省略号代替 width:overflow: hi ...
html中限制显示文字个数,【css/js】限制一行和多行文字数量，超出部分用省略号显示...
1. 设置一行文字显示文本数量,超出部分用-表示知识点:css3 text-overflow属性属性值描述 clip 修剪文本. ellipsis 显示省略符号来表明被修剪的文本. string ...
CSS 文字超出范围用省略号表示
1. 单行固定宽度,文字超出部分用省略号代替. .box-text{/* 下方四项配合使用,超出范围的显示... */width: 400rpx;overflow: hidden; /*隐藏*/whi ...
Android TextView文字超出一屏不能显示其它的文字解决方案
Android TextView文字超出一屏不能显示其它的文字解决方案参考文章: (1)Android TextView文字超出一屏不能显示其它的文字解决方案 (2)https://www.cn ...
css 实现div内显示一行、两行或三行，超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示两行或三行, ...
css实现div盒子内显示两行或三行，超出部分用省略号显示
1.div盒子内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2.div盒子显示两行或 ...
css 实现div内显示固定三行，超出部分用省略号显示
css 实现div内显示两行或三行,超出部分用省略号显示一.div内显示一行,超出部分用省略号显示 white-space: nowrap;overflow: hidden;text-overflo ...
Unity UGUI 之实现 Text 文本文字过长，省略号显示（TextMeshPro 和常规 Text 二种方法）
Unity UGUI 之实现 Text 文本文字过长,省略号显示(TextMeshPro 和常规 Text 二种方法) 目录 Unity UGUI 之实现 Text 文本文字过长,省略号显示(Te ...
CSS实现单行(多行)文本超出部分用省略号显示
前言(日常废话) 该文写的是CSS如何实现单行以及多行文本末尾的超出部分用省略号来表示. 目录 1.单行超出 2.多行超出正文现在有着一个这样的div,需要两个效果,一个是单行超出部分用省略号表示 ...

文字超出部分用省略号显示

文字超出部分用省略号显示相关推荐

最新文章

热门文章