自适应宽度元素单行文本省略用法探究

单行文本省略是现代网页设计中非常常用的技术,几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景,如列表标题、文章摘要等。在响应式开发中,自适应宽度元素单行文本省略容易失效不起作用,对网页开发这造成困扰。因此,本文将要要探究自适应宽度元素单行文本省略用法。现代浏览器都支持单行文本显示生省略号(...)样式,一般情况下,实现单行文本省略只需要给元素添加下面三个CSS样式:

.demo{text-overflow:ellipsis;white-space: nowrap;overflow: hidden;
}

 

单行文本省略和元素及其父元素的width属性都无关

有很多文章提到单行文本省略时都会添加多一个条件,那就是设置width属性。事实真的是这样吗?通过下面的实例去检验一下就可以证明这个结论。

实例1:在body添加一个p标签和一个span标签,并设置单行文本省略:

<style>
body,p,span{margin:0;padding:0;
}p,
span{text-overflow:ellipsis;white-space: nowrap;overflow: hidden;
}
</style>
<body>
    <p>单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略</p><span>单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略,单行文本省略</span>
</body>

运行结果是,p标签内文本成功省略,span标签内文本省略失败,结果如下图:

最后,我尝试着给p标签设置宽度为auto或100%,结果不变;给p标签和span标签设置固定宽度值为300px,结果不变;用其他标签把p标签和span标签包裹起来,结果不变;给包裹元素设置固定宽度值,结果还是一样的。这就足以证明了单行文本省略和元素及其父元素的width属性都无关。

 

单行文本省略和元素及其父元素的display属性有关

什么属性会影响单行文本省略呢?在实例1中,我特意用来一个p标签和一个span标签,span标签无法省略。经过测试发现display属性为inline和inline-block的元素都无法实现省略。这证明单行文本省略与元素的display属性有关。

 

1)table元素(或display为table元素)内单行文本省略,需要给table元素(或display为table元素)添加table-layout:fixed样式

设置为table布局元素的子元素单行文本省略不起作用,例如:

<style>
body,p,span,img{margin:0;padding:0;
}p,
span{text-overflow:ellipsis;white-space: nowrap;overflow: hidden;
}.demo{display:table;width:100%;padding:15px 0;border-top:1px solid #ddd;
}.demo .left,
.demo .right{display:table-cell;
}.demo .left{width:120px;min-width:120px;height:90px;background-color:blue;
}.demo .left img{display:block;
}.demo .right{vertical-align: top;padding-left:15px;
}                       
</style>
<body>
    <div class="demo">
        <div class="left"><img src="img/1879408419498933204.jpg" width="100%" height="auto" /></div>
        <div class="right">
            <h2>这是一个标题</h2>
            <p>这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。</p>
        </div>
    </div>
</body>

这个实例中,demo元素设置为dispaly:table,其子元素left和right设置为display:table-cell,这种布局方式导致了元素right内的h2和p的文本省略样式都不起作用,运行结果如下图:

为了使元素right内的h2和p的文本省略样式起作用,必须在元素demo(即设置display:table的元素)添加一条样式table-layout:fixed,这个解决方式同样适用于table元素。添加这个样式后,运行结果如下图:

 

2)display为flex元素的子元素flex-item如果是自适应宽度时,flex-item内的子元素实现单行文本省略,需要给flex-item添加overflow:hidden样式

display为flex元素的子元素flex-item如果是自适应宽度时,flex-item内的子元素单行文本省略样式不起作用,例如:

<style>
body,h2,p,span,img{margin:0;padding:0;box-sizing:border-box;
}.demo{display:flex;display:-webkit-flex;width:100%;padding:15px 0;border-top:1px solid #ddd;
}.left,
.right{height:90px;
}.demo .left{width:120px;background-color:red;flex-shrink: 0;
}.demo .right{flex:auto;-webkit-flex:auto;padding-left:15px;
}h2,
p,
span{text-overflow:ellipsis;white-space: nowrap;overflow: hidden;
}</style>
<body>
    <div class="demo"><div class="left"><img src="img/1879408419498933204.jpg" width="100%" height="auto" /></div><div class="right"><h2>这是一个标题</h2><p>这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。</p></div></div>
</body>

在这个flex布局的实例中,元素right的宽度时自适应的,元素right内的h2和p元素单行文本省略样式都不起作用。如果去掉标签直接在元素right内添加文本,并为元素right添加单行文本省略样式,这时单行文本省略样式却可以正常工作。该实例的运行结果如下图:

在这个实例中,为元素right添加overflow:hidden样式后,单行文本省略样式工作正常,运行结果如下图:

 

 

总结:

1)单行文本省略必须满足三个CSS样式:text-overflow:ellipsis,white-space: nowrap,overflow: hidden。

2)单行文本省略和元素及其父元素的width属性都无关

3)table元素(或display为table元素)内单行文本省略,需要给table元素(或display为table元素)添加table-layout:fixed样式

4)display为flex元素的子元素flex-item如果是自适应宽度时,flex-item内的子元素实现单行文本省略,需要给flex-item添加overflow:hidden样式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P3390 【模板】矩阵快速幂

题目背景 矩阵快速幂 题目描述 给定n*n的矩阵A&#xff0c;求A^k 输入输出格式 输入格式&#xff1a; 第一行&#xff0c;n,k 第2至n1行&#xff0c;每行n个数&#xff0c;第i1行第j个数表示矩阵第i行第j列的元素 输出格式&#xff1a; 输出A^k 共n行&#xff0c;每行n个数&…

c#精彩编程200例百度云_永安市教育局被授予“人工智能编程教育试验区”

11月28日&#xff0c;“第二届人工智能与机器人教育大会青少年人工智能与编程教育主题论坛”在厦门召开。永安市教育局被中国教育发展战略学会人工智能与机器人教育专委会授予“人工智能编程教育试验区”牌匾&#xff0c;巴溪湾小学、西门小学、三中、一中附属学校、实验小学等…

Spring Data JPA和分页

让我们从支持分页的经典JPA方法开始。 考虑一个简单的域类–一个具有名字&#xff0c;姓氏的“成员”。 为了支持在成员列表上进行分页&#xff0c;JPA方法是支持一种查找器&#xff0c;该查找器将获取第一个结果&#xff08;firstResult&#xff09;的偏移量和要检索的结果&am…

Windows环境下安装、卸载Apache

安装Apache 服务 打开 Apcahe的目录 &#xff0c;打开bin目录&#xff0c; 如&#xff1a;E:\wamp\Apache24\bin &#xff0c;打开目录&#xff0c;Shift键 鼠标右键 &#xff0c; 点击 在此处打开命令窗口或者W快捷键直接到此处&#xff0c; 也可以Window键r&#xff0c;输入…

css清浮动

我们在平常做项目的时候&#xff0c;float这个css属性经常会用到。元素浮动会让元素脱离文档流&#xff0c;从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。 什么是浮动 浮动元素脱离文档流并且向左或者向右移动&#xff0c;直到浮动元素的边缘碰到父级框或者另…

DirectX11 学习笔记7 - 支持自由移动的摄像机

如今将又一次制定一个camera摄像机。能够自由移动。比方前进 后退&#xff0c;上游 下潜。 各个方向渲染之类的。 首先设置按键。 这个时候须要在 XWindow.h 里面 bool XWindow::frame() {//推断是否按下ESC键if(x_input->isKeyDown(VK_ESCAPE))return false;//假设A,S,D,W,…

腾讯吃鸡 android,腾讯吃鸡手游《光荣使命》正式上线:安卓/iOS不限号测试

IT之家11月29日消息 今天下午&#xff0c;腾讯首款百人战术竞技手游《光荣使命》在安卓、iOS双平台正式上线&#xff0c;开启全面测试。(官网下载&#xff1a;点此链接&#xff0c;双平台已开放下载。)该游戏采用第三人称射击视角&#xff0c;玩家化身参与“使命行动”军事演习…

lazada铺货模式的选品_lazada小白的运营难点→铺货与精细化运营的优劣势详解

lazada是铺货还是精细化经营第一种铺货铺货作为平台早期都是比较受欢迎的&#xff0c;平台的蛮荒期&#xff0c;成长期当中&#xff0c;铺货的商家是非常受欢迎的&#xff0c;因为平台需要更多SKU产品&#xff0c;去吸引买家&#xff0c;铺货这个时候是最好的也是能最快的成长起…

excel数据生成sql insert语句

excel数据生成sql insert语句 excel表格中有A、B、C三列数据&#xff0c;希望导入到数据库users表中&#xff0c;对应的字段分别是name,sex,age 。 在你的excel表格中增加一列&#xff0c;利用excel的公式自动生成sql语句&#xff0c;方法如下&#xff1a; 1、增加一列&#xf…

重载,覆盖,隐藏

转载于:https://www.cnblogs.com/jhcelue/p/7145525.html

荣耀鸿蒙系统开机动画,荣耀赵明:鸿蒙系统首发设备欲屏蔽开机广告

来源&#xff1a;硅谷分析狮余承东表示8月9日会发布鸿蒙系统&#xff0c;而从他透露的一些细节看&#xff0c;鸿蒙系统将首先运用在智慧屏终端上&#xff0c;其配合大屏幕和自研芯片(麒麟AI芯片&#xff0c;鸿鹄智慧显示芯片&#xff0c;凌霄WIFI芯片)&#xff0c;将实现生态上…

Hamcrest包含匹配器

与Hamcrest 1.2相比 &#xff0c;针对Matchers类的Hamcrest 1.3 Javadoc文档为该类的几种方法添加了更多文档。 例如&#xff0c;四个重载的contains方法具有更具描述性的Javadoc文档&#xff0c;如下面所示的两个比较屏幕快照所示。 尽管仅通过尝试就可以弄清楚“包含”匹配器…

函数 (四) 迭代器和生成器

一 迭代器 一 迭代的概念 #迭代器即迭代的工具&#xff0c;那什么是迭代呢&#xff1f;#迭代是一个重复的过程&#xff0c;每次重复即一次迭代&#xff0c;并且每次迭代的结果都是下一次迭代的初始值 while True: #只是单纯地重复&#xff0c;因而不是迭代print(>) l[1,2,3]…

进阶-JMS 知识梳理

JMS 一、 概述与介绍 ActiveMQ 是Apache出品&#xff0c;最流行的、功能强大的即时通讯和集成模式的开源服务器。ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现。提供客户端支持跨语言和协议&#xff0c;带有易于在充分支持JMS 1.1和1.4使用J2EE企业集成模式…

android蓝牙pair,Android向更多蓝牙设备开放Fast Pair功能 配对更轻松了

原标题&#xff1a;Android向更多蓝牙设备开放Fast Pair功能 配对更轻松了 来源&#xff1a;cnBeta.COM蓝牙是一项应用非常广泛的无线技术&#xff0c;在无线音频配件、智能手表和智能家电中都广泛使用。不过蓝牙设备的配对体验并不优秀&#xff0c;而且无法实现跨平台的一致性…

python绘制帕累托图

python绘制帕累托图代码 1 import pandas as pd2 import matplotlib.pyplot as plt3 plt.rcParams[font.sans-serif][SimHei]#表示可以显示中文4 plt.rcParams[axes.unicode_minus]False#表示可以正常显示正负号5 datapd.read_csv(catering_dish_profit.csv,index_coltype)6 pr…

html5 测评游戏,暗黑之王评测:HTML5游戏铸就最华丽ARPG冒险

由白鹭时代(Egret Technology)与比悦科技联手推出的重度大型HTML5游戏《暗黑之王》&#xff0c;一款典型的ARPG手游&#xff0c;其HTML5版本推出以来&#xff0c;获得了来自业界、玩家和媒体的大量关注。其丰富的游戏内容和玩法&#xff0c;加上卓越的游戏性能表现&#xff0c;…

搞定flex布局

这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求&#xff0c;比如实现水平居中可以使用 margin: 0 auto&#xff0c;实现水平垂直同时居中可以如下设置&#xff1a;.dad {position: relative; } .son {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left…

Fiddler抓包使用教程-QuickExec

转载请标明出处&#xff1a;http://blog.csdn.net/zhaoyanjun6/article/details/73468287 本文出自【赵彦军的博客】 在 Fiddler 中自带了一个 QuickExec 命令行&#xff0c;用户可以直接输入并快速执行脚本命令。 常见命令 help 打开官方的使用页面介绍&#xff0c;所有的命令…

html5与css3都要学吗,前端要学css3吗?

前端要学css3&#xff1b;HTML5、CSS3是前端工程师必须要学会。现在移动端的兴起&#xff0c;导致web前端开发的技术逐变向css3和html5转变&#xff0c;所以css3一定要学。CSS3是CSS(层叠样式表)技术的升级版本&#xff0c;于1999年开始制订&#xff0c;2001年5月23日W3C完成了…