HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS结构样式 ——> overflow | 文本溢出-超出显示为省略号

overflow | 文本溢出-超出显示为省略号

2016/01/25 23:17:05 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS结构样式 | 关键词:overflow,文本超出,超出隐藏,省略号

文本溢出-超出文本显示为省略号

HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作的时候,我们什么时候应该考虑内容撑开宽高,又应该在何时考虑文本超出的问题。

实现文本超出显示为省略号

使用CSS实现元素的文本超出隐藏,通常存在两种方式,一种是超出直接隐藏内容,另一种是超出显示为省略号。

超出隐藏

超出隐藏,只需要为一个有固定宽高设置为overflow:hidden;

单行文本超出显示为省略号

实现代码如下:

See the Pen 文本溢出-单行文本超出显示为省略号 by majiang (@majiang) on CodePen.

多行文本超出显示为省略号

多行文本超出显示为省略号的需求,仅仅使用HTML和CSS就很难实现了。通常我们可以使用JS辅助进行实现。看如下案例:

  1. <style>
  2.     .text-overflow {
  3.         width: 400px;
  4.         line-height: 20px;
  5.     }
  6. </style>
  7. <div class="text-overflow" id="con">HTML5学堂:本文当中我们主要为大家讲解如何实现文本超出显示为省略号;同时讲解一下,在网页开发与制作的时候,我们什么时候应该考虑内容撑开宽高,又应该在何时考虑文本超出的问题。</div>
  8. <script>
  9.     var con = document.getElementById('con');
  10.     var textCon = con.innerHTML;
  11.     con.innerHTML = textCon.substring(0, 49) + '…';
  12. </script>

基本原理很简单:通过innerHTML获取元素的内容,之后使用字符串方法进行截取,截取前49个字符,之后,在这49个字符之后连接一个“...”,最后,将这个截取后的字符串赋值给原来的元素内容即可。

何时考虑超出隐藏

通常是在考虑后台对前端影响的时候,要针对超出部分进行处理。很多时候数据是从后台传到前端页面当中的,那么有时有些地方内容会比较多,有些地方内容会比较少。针对这种情况我们做个简单的整理:

1 对于img元素的父级标签,需要设置超出隐藏;

2 对于列表页的标题和内容描述部分,通常需要针对超出进行设置。多行的内容描述部分需要设置超出隐藏;单行的列表页标题,可以设置超出隐藏或超出显示为省略号;

3 对于内容页的标题和内容,千万不要随意设置固定高度,也不要设置超出隐藏。

本文章共耗时1.5小时,责任小编:HTML5学堂-利利。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端