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

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

相关文章

来自专栏木头编程 - moTzxx

CSS 样式控制溢出的数据 省略号隐藏

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

703
来自专栏肖洒的博客

前端入门学习--CSS

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 ...

772
来自专栏恰同学骚年

Web前端温故知新-CSS基础

  定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

723
来自专栏GIS讲堂

CSS学习笔记

<linkhref="*.css" rel="stylesheet" type="text/css"/>

1034
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

17410
来自专栏Modeng的专栏

Vue2.5笔记:Vue中的模版

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中,就会需要用到我们的模版,我们只是简单的使用了一些,模版其实还有很多其他的特性。今天我们就来看看模版的其...

541
来自专栏编程坑太多

html元素(标签)

1092
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

37011
来自专栏吾爱乐享

php学习之html属性-表格(六)

832
来自专栏pydata

html5新特性

1.新的文档类型 2.脚本和链接无需type 3.语义Header和Footer 4.Hgroup 5.标记元素 6.图形元素 7.重新定义 8....

613

扫码关注云+社区