CSS3如何实现超出指定文本以省略号显示效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3如何实现超出指定文本以省略号显示效果相关的知识，希望对你有一定的参考价值。
超出指定文本以省略号显示效果，用css的"text-overflow:ellipsis;"实现
text-overflow:ellipsis; 溢出的部分用 省略号 表示。
<!DOCTYPE html><html>
<head>
<style>
div.test
white-space:nowrap;
width:123px;
overflow:hidden;
border:1px solid #000000;
text-overflow:ellipsis;
</style>
</head>
<body>
<p>这个 div 使用 "text-overflow:ellipsis" ：</p>
<div class="test">
This is some long text that will not fit in the box
</div>
</body>
</html>
在div块中要设置宽度，"overflow:hidden;"要跟"text-overflow:ellipsis;"使用才行
订单的的
随风倒随风倒十分撒地方撒地方
多行文本超出显示省略号
多行文本超出显示为省略号的需求，仅仅用html和css很难满足需求了，可以借助js实现，看案例：
<style> .text-overflow{ width:400px; line-height:20px; } </style>
<div class="text-overflow" id="con"> 本文当中我们主要为大家演示如何实现文本超出显示为省略号,以及在网站开发时，什么时候应该考虑内容撑开宽高，还有合适考虑文本超出的问题。 本文当中我们主要为大家演示如何实现文本超出显示为省略号,以及在网站开发时，什么时候应该考虑内容撑开宽高，还有合适考虑文本超出的问题。 </div>
<script> var con=document.getElementById("con"); var textCon=con.innerHTML; con.innerHTML=textCon.substring(0,49)+"..."; </script>
基本原理很简单：通过innerHTML获取元素内容，然后用字符串方法进行截取前49个字符，再在49个字符后加上“...”，最后，将这个截取后的字符串赋值给原来的元素内容即可。
何时考虑超出隐藏
通常是在考虑后台对前端影响的时候，要针对超出部分进行处理。很多时候数据是从后台传到前端页面当中的，那时候有的地方内容会比较多，有的地方内容比较少。针对这种情况我做个简单整理：
1.对于img元素的父级标签，需要设置超出隐藏；
2.对于列表页的标题和内容描述部分，通常需要针对超出进行设置。多行的内容描述部分需要设置超出隐藏；单行的列表页标题，可以设置超出隐藏或超出显示为省略号；
3.对于内容页的标题和内容，千万不要随意固定高度，也不要设置超出隐藏。
以上是关于CSS3如何实现超出指定文本以省略号显示效果的主要内容，如果未能解决你的问题，请参考以下文章