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

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 条评论
登录 后参与评论

相关文章

来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

3429
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上开发仪表盘控件

设置仪表盘轴线段,打开集合编辑器,并点击"添加",Color属性(仪表盘轴线段的颜色)和SplitNumRate属性(仪表盘轴线段占总线段的比例,取值0-1),...

543
来自专栏柠檬先生

jquery 操作css 选择器

.addClass()   为每个匹配的元素添加指定的样式类名   .addClass(className)     className 为每个匹...

1795
来自专栏python3

tkinter -- Scale

创建一个垂直 Scale,最大值为100,最小值为0,步距值为1。这个参数设置也就是 Scale的缺省设置了

683
来自专栏布尔

js也可以有自定义事件 注入就是这么爽

  在c#中有delegate,还有特殊的可以直接应用于事件编程的delegate,那就是event。而在js中没有c#的event,更没有delegate,有...

1947
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

912
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

3.4 js生成报表

如下函数示意在ID为tbHost的元素内追加一个表格:假设nodes为二维数组,遍历其所有行和列,将其元素的Ap属性以二维表格的形式显式出来。通过该函数可以直观...

620
来自专栏前端知识分享

第70天:jQuery基本选择器(一)

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发

471
来自专栏一枝花算不算浪漫

[Java面试九]脚本语言知识总结.

32713
来自专栏大内老A

ASP.NET MVC的Model元数据与Model模板:预定义模板

通过ModelMetadata表示的Model元数据的一个主要的作用在于为定义在HtmlHelper和HtmlHelper<TModel>中的模板方法(这些模板...

18410

扫描关注云+社区