天龙八部搭建mysql_天龙八部架设mysql数据教程

今天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。

文本超长打点
我们都知道，到今天（2021/03/06），CSS 提供了两种方式便于我们进行文本超长的打点省略。

对于单行文本，使用单行省略：

{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
image

而对于多行文本的超长省略，使用 -webkit-line-clamp 相关属性，兼容性也已经非常好了：

{
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
image

CodePen Demo – inline-block 实现整块的溢出打点

问题一：超长文本整块省略
基于上述的超长打点省略方案之下，会有一些变化的需求。譬如，我们有如下结构：

Sb Coco

FE UI UX Designer 前端工程师

image

对于上述超出的情况，我们希望对于超出文本长度的整一块 – 前端工程师，整体被省略。

如果我们直接使用上述的方案，使用如下的 CSS，结果会是这样，并非我们期待的整块省略：

.person-card__desc {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
image

将 display: inline 改为 display: inline-block 实现整块省略
这里，如果我们需要实现一整块的省略，只需要将包裹整块标签元素的 span 的 display 由 inline 改为 inline-block 即可。

.person-card__desc span {
display: inline-block;
}
image

这样，就可以实现，基于整块的内容的溢出省略了。完整的 Demo，你可以戳这里：

CodePen Demo - 整块超长溢出打点省略

问题二：iOS 不支持整块超长溢出打点省略
然而，上述方案并非完美的。经过实测，上述方案在 iOS 和 Safari 下，没能生效，表现为这样：

image

查看规范 - CSS Basic User Interface Module Level 3 - text-overflow，究其原因，在于 text-overflow 只能对内联元素进行打点省略。（Chrome 对此可能做了一些优化，所以上述非 iOS 和 Safari 的场景是正常的）

所以猜测是因为经过了 display: inline-block 的转化后，已经不再是严格意义上的内联元素了。

解决方案，使用多行省略替代单行省略
当然，这里经过试验后，发现还是有解的，我们在开头还提到了一种多行省略的方案，我们将多行省略的代码替换单行省略，只是行数 -webkit-line-clamp: 2 改成一行即可 -webkit-line-clamp: 1。

.person-card__desc {
width: 200px;
white-space: normal;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.person-card__desc span {
display: inline-block;
}
这样，在 iOS/Safari 下也能完美实现整块的超长打点省略：

image

CodePen Demo – iOS 下的整块超长溢出打点省略方案

值得注意的是，在使用 -webkit-line-clamp 的方案的时候，一定要配合 white-space: normal 允许换行，而不是不换行。这一点，非常重要。

这样，我们就实现了全兼容的整块的超长打点省略了。

当然，-webkit-line-clamp 本身也是存在一定的兼容性问题的，实际使用的时候还需要具体去取舍。

天龙八部搭建mysql_天龙八部架设mysql数据教程相关推荐

零基础搭建一个基于PHP+MYSQL网站教程，个人建站全过程
零基础搭建一个基于PHP+MYSQL网站教程,个人建站全过程一.网站计划编写. 1.定位,网站名称,关键字,描述,分类目录,内容 [这里推荐用脑图软件,可以用百度脑图] 2.想好域名二. ...
怎么样查看视图+mysql_如何查询mysql数据表中的视图
本篇文章主要给大家介绍怎么查询mysql数据表中的视图. 想必大家如果有看过之前的mysql视图相关的文章,都已经对视图的基本概念有一定的了解了.视图也就是是一个虚拟表,其内容由查询定义.同真实存在数 ...
斐讯k3搭建nginx+php+MariaDB(mysql )的教程
安装nginx+php+MariaDB 以前用k3安装了onmp,中间踩了不少坑.以前发到贴吧的,现在发过来记录一下,顺便给大家参考一下. 斐讯k3性能比较强,拿来建小型网站还是可以的.但是内置储存太 ...
世上最简单的mysql_最简单易懂的mysql安装教程
今天安装MySQL花了蛮长时间的,感觉坑还是挺多的,写遍文章总结一下. 一.安装 1.解压zip包到安装目录先从MySQL官网下载mysql最新的免安装版压缩包解压之后变成这个样子: 里面的文件 ...
局域网搭建共享mysql_局域网共享设置mysql安装教程.doc
局域网共享设置 mysql 安装教程具体步骤大势至局域网共享管理工具.局域网共享权限设置软件是国内独家专门设置服务器共享权限.监控共享文件访问.共享文件访问日志的软件,可以独家实现只让读取共享 ...
mysql备份psb文件怎么打开_Navicat for MySQL 数据备份教程
原标题:Navicat for MySQL 数据备份教程一个安全和可靠的服务器与定期运行备份有密切的关系,因为错误有可能随时发生,由攻击.硬件故障.人为错误.电力中断等都会照成数据丢失.备份功能为防 ...
ssm radis mysql_从零开始搭建框架SSM+Redis+Mysql（一）之摘要
从零开始搭建框架SSM+Redis+Mysql(一)之摘要本文章为本人实际的操作后的回忆笔记,如果有步骤错漏,希望来信307793969@qq.com或者评论指出. 本文章只体现过程,仅体现操作流程 ...
binlog流程 mysql_小米 MySQL 数据实时同步到大数据数仓的架构与实践
背景MySQL由于自身简单.高效.可靠的特点,成为小米内部使用最广泛的数据库,但是当数据量达到千万/亿级别的时候,MySQL的相关操作会变的非常迟缓:如果这时还有实时BI展示的需求,对于mysql来说 ...
Win10+Python+Django+Nginx+MySQL开发教程及实例（1）——开发环境搭建
Win10+Python+Django+Nginx+MySQL开发教程及实例 PaulTsao 本教程共有三篇内容: 第一篇:Win10+Python+Django+Nginx+MySQL 开发环境搭 ...

天龙八部搭建mysql_天龙八部架设mysql数据教程

天龙八部搭建mysql_天龙八部架设mysql数据教程相关推荐

最新文章

热门文章