效果

思路

这个效果是文本环绕标签组件最多显示两行，京东app也有这个效果

环绕效果我们使用float:left实现环绕，文字最多显示两行，我一开始想到的是用下面的代码实现：

display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式
-webkit-line-clamp: 2; // 显示的行数

ps: 关于display:-webkit-box我们下面文章再介绍

但是出来的效果是下面这样的：

于是查了float的资料

浮动出现的意义只是用来让文字环绕图片而已，仅此而已。float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

根据定义

最终文本显示两行还是改为下面的方式实现
设置文本行高，然后设置文本的最大高度即可，伪代码如下：

line-height: 50rpx;
max-height: 100rpx;

探索下 display:-webkit-box 是什么

现在并非所有浏览器都支持CSS3新的属性，其中以firefox、chrome、opera最为典型，它们尽可能想要去兼容最新的标准或规定，但却发现要实现这些支持还是有一定的难度。但实际上，mozilla和webkit正在对此进行实验和开发，试图有一天可以支持它。对于CSS开发者来说，他们发现了这个，并在前面添加-moz-或-webkit-来声明：即使你们在实验阶段，我们仍然坚持使用你们当前开发的成果，无论显示出来的效果是好是坏。----内容来源网络

从上面介绍我们知道，-webkit-是浏览器为了兼容新API而做的一种调整。

大多数浏览器的前缀包括：

-moz- : Firefox
-webkit- : Safari & Chrome
-o- : Opera
-khtml- : Konqueror
-ms- : Internet Explorer
-chrome- : Google Chrome专用前缀

前面我们也知道display:-webkit-box是让该对象以伸缩性的盒子模型去展示内容。
那么我们还知道display:flex是专门来实现伸缩性，他们的区别是什么呢？

下图是来自知乎网友的解答：

可以看出，flex语法是目前可伸缩性布局的主流实现方式，为了向下兼容，我们还是会使用--webkit-box的API。

实现

有其他实现方式的朋友，欢迎解惑。
这里涉及的代码不便公开，具体实现代码可自行复现或联系我

css 效果-uni-app 使用 float 属性实现环绕之后文字最多显示两行相关推荐

CSS中的Position、Float属性的一些深入探讨
为什么80%的码农都做不了架构师?>>> HTML布局的基本要点: 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(bo ...
css中的position和float属性
我们在前端开发时一定会用到相对定位.绝对定位.浮动模型等等来调整块的位置.但在调整块与块之间的位置时又有一些需要注意的细节,推荐大家进入点击打开链接进行学习. 文章讲的较为详细,一定对大家有帮助.
html最多显示两行,css 实现两行或多行文本溢出显示省略号（...）
1. 大家都知道,强制一行溢出显示省略号(...)的情况很简单 overflow:hidden;//超出的隐藏 text-overflow:ellipsis;//显示省略符号来代表被修剪的文本. wh ...
css文本行高是哪个属性_CSS样式----CSS属性：字体属性和文本属性（图文详解）...
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位字体属性文本属性定 ...
html 如何把文字和图片放到一行,DIV+CSS图片和文字如何显示同一行
如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div, ...
CSS——float属性备忘笔记
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间.CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了 ...
CSS布局 ——从display，position， float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
CSS布局——display，position，float属性
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

css 效果-uni-app 使用 float 属性实现环绕之后文字最多显示两行

效果

思路

探索下 display:-webkit-box 是什么

实现

css 效果-uni-app 使用 float 属性实现环绕之后文字最多显示两行相关推荐

最新文章

热门文章