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

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学堂-利利。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

JavaScript之DOM

一、什么是DOM? DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 DOM(Docum...

3095
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

56711
来自专栏练小习的专栏

当inline-block和text-indent遇到IE6,IE7

在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如: <a href="#" class...

1926
来自专栏九彩拼盘的叨叨叨

jQuery 最佳实践(译)

原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns

753
来自专栏程序员的知识天地

H5学习从0到1-H5的框架(13)

H5框架语法介绍 :frame:框架对于页面的设计有很大的作用 frameSet:框架集标签定义如何将窗口分割为框架 ,每一个frameset定义一些列行或者列...

1903
来自专栏每日一篇技术文章

weex-11-组件slider的使用

1.怎么让banner的宽度和屏幕的宽度相等 2.怎么让banner自动轮播和轮播间隔 3.如何添加指示器 4.如何设置指示器的颜色和大小 5.点击轮播...

1621
来自专栏前端杂货铺

mouseenter以及mouseleave兼容性

在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件。有时候,我们需要使用 mouseente...

3987
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(六)Vue的组件

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

944
来自专栏大数据

Vue.js常见问题精选(一)

一、数据绑定不一定就是使用双大括号 “{{}}” 语法 我们都知道,Vue.js 最常见的数据绑定方式是使用“Mustache”语法(双大括号),Angular...

2116
来自专栏从零开始学自动化测试

appium+python自动化26-模拟手势点击坐标(tap)

前言: 有时候定位元素的时候,你使出了十八班武艺还是定位不到,怎么办呢?(面试经常会问) 那就拿出绝招:点元素所在位置的坐标 一、 tap用法 1.tap是...

5264

扫码关注云+社区

领取腾讯云代金券