文本溢出-超出文本显示为省略号
HTML5学堂：本文当中我们主要为大家讲解如何实现文本超出显示为省略号；同时讲解一下，在网页开发与制作的时候，我们什么时候应该考虑内容撑开宽高，又应该在何时考虑文本超出的问题。
实现文本超出显示为省略号
使用CSS实现元素的文本超出隐藏，通常存在两种方式，一种是超出直接隐藏内容，另一种是超出显示为省略号。
超出隐藏
超出隐藏，只需要为一个有固定宽高设置为overflow:hidden;
单行文本超出显示为省略号
实现代码如下：
<style>
.text-overflow {
width: 400px;
height: 40px;
line-height: 20px;
/*如下为超出隐藏显示为省略号的核心代码*/
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
word-break: keep-all; /* 不换行 */
white-space: nowrap; /* 不换行 */
}
</style>
<div class="text-overflow">HTML5学堂：本文当中我们主要为大家讲解如何实现文本超出显示为省略号；同时讲解一下，在网页开发与制作的时候，我们什么时候应该考虑内容撑开宽高，又应该在何时考虑文本超出的问题。</di多行文本超出显示为省略号
多行文本超出显示为省略号的需求，仅仅使用HTML和CSS就很难实现了。通常我们可以使用JS辅助进行实现。看如下案例：
<style>
.text-overflow {
width: 400px;
line-height: 20px;
}
</style>
<div class="text-overflow" id="con">HTML5学堂：本文当中我们主要为大家讲解如何实现文本超出显示为省略号；同时讲解一下，在网页开发与制作的时候，我们什么时候应该考虑内容撑开宽高，又应该在何时考虑文本超出的问题。</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 对于内容页的标题和内容，千万不要随意设置固定高度，也不要设置超出隐藏。
本文章共耗时1.5小时，责任小编：HTML5学堂-利利。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录