澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

实现多行文字截断丨前端开发者,css文本过长如

灵活的 overflow

2017/12/07 · CSS

原稿出处: 大漠   

说到overflow对于CSSer来讲并不会素不相识,用来调节内容溢出的景观。而比很多时候大家还恐怕会利用text-overflow来调节内容溢出的显示。日常是一直截取,另一种是截取之后让文本前面带有多个点的省略号。但是有意思的是,大家今日要说的利落overflow

前两天@kizmarh发的博文,让本人别开生面。再次让自家只可以钦佩海外的技术员的立异技艺。我们可能会说是什么效果与利益啊?又是什么样意义工夫可以称作是灵活的overflow啊?别的相当少说,先上二个功能:
Demo1

初看效用,好象并从未例外。如若想见到独树一帜的意义,大家能够在上边包车型客车Demo做一下连锁的操作。举例,将容器逐步的变小,只怕采纳复选框,就能够看见分歧的作用:图片 1

这便是说这么的职能是怎么落到实处的吗?那就是接下去要介绍的。

众多同桌大概会使用CSS的媒体询问来制作响应式的网址。而在登时当日,某些组件不可能只依附于视窗的幅度来做为条件的判断。而是依据于不相同的标准做出不平等的响应。

有七个很好的建设方案是Container Queries,而它的前身是Element Queries。他们的现在并不分明,但是在那之中的部分特点,能够经过Polyfills来促成。但话又说回来,使用Polyfill来完结部分特征,并不是旷日悠久的方案,並且要因而Polyfill到达每多少个天性,那也是一件特别艰巨的职分。

然则大家不得不借助于JavaScript恐怕说Container Queries?如若大家选取CSS就会缓和Container Queries提供的部分风味,那是还是不是二个更值得可取的方案吧?接下去就来看多少个广大的事例。

小说来源:前端开采者丨    www.rokub.com

上一篇文章介绍了Flex布局的语法,前日牵线常见布局的Flex写法。
你会看出,不管是怎样布局,Flex往往都足以几行命令搞定。

对于单行文本:

长文本变得越来越短

在我们Web的实在利用中,常有那样的一种效应。在有丰盛的长空里显示全体的文件内容出来,但在一贯不丰硕的空中里,通过text-overflow:ellipsis把要显得的内容变短。但大家并不只是想把内容截取,比方大家想在有丰盛的半空中显得一行文本,在不丰盛的空中内呈现另一行文本,以致是在越来越短的空间,只经过三个Logo来呈现。那也正是您在篇章起始见到的魔法。那么那样的法力是怎么落到实处的啊?

这段日子在做响应式系统规划的时候碰到需求对标题实行多行文字截取的效用,如下图:

图片 2

语法: 
  text-overflow : clip | ellipsis 
  参数: 
  clip :  不显得省略标识(...),而是大约的裁切 
  (clip那一个参数是一时用的!) 
  ellipsis :  当对象内文本溢出时彰显省略标志(...) 
  说明: 
  设置或探求是不是选取贰个轻便易行标识(...)标示对象内文本的溢出。 
  最大的欠缺:text-overflow:ellipsis属性在FF中是绝非意义的。 

达成方案

先是在大家的模板中有两局地结构,都停放在overflower的器皿此中,当中overflower-short中放置的是短文本内容,同时还会有一个overflower-long容器中放置的是长文本内容。为了让内容更具可读性,在短文本的器皿中动用aria-hiddentitle来加强阅读性。例如:

JavaScript

<span class="overflower"> <!-- 放置短文本的器皿 --> <span class="overflower-short" aria-hidden="true" title="Some long text that could become shorter"> Short text here is.</span> <!-- 放置长文本的容器 --> <span class="overflower-long">Some long text that could become shorter.</span> </span>

1
2
3
4
5
6
7
<span class="overflower">
<!-- 放置短文本的容器 -->
<span class="overflower-short" aria-hidden="true" title="Some long text that could become shorter">
Short text here is.</span>
<!-- 放置长文本的容器 -->
<span class="overflower-long">Some long text that could become shorter.</span>
</span>

此地我们将用到CSS的flex-wrap属性。将overflower容器设置为inline-flex,并且还要把flex-wrap的值设置为wrap。然后再overflower-shortoverflower-long安装区别的体裁。其他对于不帮助flex-wrap的浏览器,仍然使用text-overflow:ellipsis来处理。

JavaScript

.overflower { line-height: 1.5em; display: inline-block; overflow: hidden; box-sizing: border-box; max-width: 100%; height: 1.5em; white-space: nowrap; text-overflow: ellipsis; } .overflower-long { display: inline; } .overflower-short { display: none; } @supports (flex-wrap: wrap) { .overflower { display: inline-flex; flex-wrap: wrap; } .overflower-short { display: block; overflow: hidden; width: 0; text-overflow: ellipsis; flex-grow: 1; } .overflower-long { flex-basis: 100%; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.overflower
{
    line-height: 1.5em;
 
    display: inline-block;
    overflow: hidden;
 
    box-sizing: border-box;
    max-width: 100%;
    height: 1.5em;
 
    white-space: nowrap;
    text-overflow: ellipsis;
} .overflower-long
{
    display: inline;
} .overflower-short
{
    display: none;
} @supports (flex-wrap: wrap)
{
    .overflower
    {
        display: inline-flex;
 
        flex-wrap: wrap;
    } .overflower-short
    {
        display: block;
        overflow: hidden;
 
        width: 0;
 
        text-overflow: ellipsis;
 
        flex-grow: 1;
    } .overflower-long
    {
        flex-basis: 100%;
    }
}

规律正是如此轻易,大家来看多少个实例:
Demo2

拖动容器右下角改动容器大小,只怕选用复选框,你将见到不名一格的功力:图片 3

她们是何等做事的,来探视CSS:

  • 使用@supports做了三个渐进加强的处理,如若浏览器扶助flex-wrap天性,那么将使用Flexbox的部分性质的特征,比方容器overflowerinline-flex容器,然后合作flex-grow:1text-overflow:ellipsis来拍卖短文本样式,对于长文本,将flex-basis设置为100%
  • 除此以外索要给容器二个固定的高度。所以设置height的值,同期为了文本能垂直居中,再安装line-height的值和height等同
  • 对此不支持flex-wrap的浏览器,在overflower也正是最外侧的器皿中,通过text-overflow:ellipsiswhite-space来支配文件,当然那个时候短文本就不显得了

大概就是那样的一个干活规律。即使这种方法让我们兑现了灵活的overflow,效果是更让人认为很爽,但对于追求HTML干净的同班来说,那是一件不大概忍受的事务。为了这种效果,让我们的HTML变得冗余。鱼和熊掌不可兼得嘛!

由此这些功用,再一次表达了CSS的强硬!

除却,为了记生理残疾行动障碍者职员能更加好的访谈网址,这里还透过aria-hidden='true'以及title等等的本性,加强可阅读性。

图片 4

本人只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。作者的要紧参照他事他说加以考察资料是Landon Schropp的稿子和Solved by Flexbox。
一、骰子的布局
骰子的一边,最多能够停放9个点。

 注意:

总结

那篇小说主要思路是根源于@kizmarh发的博文,小编的新意让本身钦佩的敬佩。通过就义HTML的冗余,协作局地CSS的性状,比方Flexbox唯有的性状,CSS强盛的采取器,可以援助大家灵活的落到实处overflow的功效。也正是说,不依附别的的JavaScript代码,能够让大家根据容器的大小突显差别的文本,让大家的客商体验更加的和睦。感兴趣的同班不仿试试。

2 赞 4 收藏 评论

图片 5

类似特别大约的标题截断效果,可是依然未有三个联合 CSS 属性完结正式,须求选拔一些奇淫好招来促成,日常的话,在做那样文字截断效果时我们越多是期望:

图片 6

一、仅定义text-overflow:ellipsis; 无法兑现省略号效果。 

包容性好,对各大主流浏览器有好的支持

下边,就来看看Flex怎么样贯彻,从1个点到9个点的布局。你能够到codepen实现多行文字截断丨前端开发者,css文本过长如何设置省略号。查看Demo。

二、定义text-overflow:ellipsis; white-space:nowrap; 一样无法完结省略号效果。 

响应式截断,依照分裂幅度做出调解

图片 7

三、同期选取: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 完结了所想要博取的溢出文件显示省略号效果

文本超过范围才显示省略号,不然不显得省略号

一旦不加表达,本节的HTML模板一律如下。
<div class="box"> <span class="item"></span></div>

四、部分浏览器供给设置宽度。

大约号地方展现刚好

地点代码中,div成分(代表骰子的三个面)是Flex容器,span成分(代表贰个点)是Flex项目。假设有七个系列,就要增添多少个span成分,就那样类推。
1.1 单项目
率先,唯有左上角1个点的情形。Flex布局暗许正是首行左对齐,所以一行代码就够了。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

据他们说上述的守则,上边作者就讲介绍各个才能完结截断效果,并依据上述的评比标准得出最优解。(代码笔者都传到 jsfiddle 平台,可点击 demo 地址查看)

图片 8

  

单行文本截断 text-overflow

.box { display: flex;}

 多行文本:

文本溢出大家平时选择的应该正是 text-overflow: ellipsis 了,相信大家也很明白,只需轻巧几行代码就足以完结单行文本截断。

设置项目标对齐格局,就能够落到实处居中对齐和右对齐。

WebKit浏览器或运动端的页面:

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

图片 9

    在WebKit浏览器或移动端(绝大多数是WebKit内核的浏览器)的页面完成比较轻松,可以一贯运用WebKit的css扩大属性(WebKit是私人商品房属性)-webkit-line-clamp ;注意:那是三个 半间半界的性子(unsupported WebKitproperty),它并未有现身在 CSS 规范草案中。

完结效果与利益:demo 地址

.box { display: flex; justify-content: center;}

    -webkit-line-clamp用来界定在三个块成分展现的文本的行数。 为了完成该意义,它需求整合别的的Web基特属性。

图片 10

图片 11

  常见结合属性:

品质浏览器原生扶助,各大浏览器宽容性好,劣势正是只匡助单行文本截断,并不扶植多行文本截取。

.box { display: flex; justify-content: flex-end;}

display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

适用场景:单行文字截断最简单易行完结,效果最棒,放心使用。

设置交叉轴对齐情势,能够垂直运动主轴。

 那一个脾性相比较合适WebKit浏览器或移动端(绝超越61%是WebKit内核的)浏览器。

一经是多行文字截取效果,达成起来就从未那么轻便。

图片 12

 

前端开辟者丨CSS

.box { display: flex; align-items: center;}

跨浏览器宽容的方案:
   相比可相信简单的做法就是设置相对固化的器皿中度,用包含省略号(…)的因素模拟达成; 

-webkit-line-clamp 实现

图片 13

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

先介绍第一种方法,正是通过 -webkit-line-clamp 属性完成。具体的方法如下:

.box { display: flex; justify-content: center; align-items: center;}

注意:

div{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

图片 14

height中度真好是line-height的3倍;甘休的省略好用了半透明的png做了减淡的法力,只怕设置背景颜色;IE6-7不出示content内容,所以要宽容IE6-7能够是在剧情中参预三个标签,比方用<span class="line-clamp">...</span>去模拟;要扶助IE8,必要将::after替换成:after;

它必要和 display、-webkit-box-orient 和 overflow 结合使用:

.box { display: flex; justify-content: center; align-items: flex-end;}

JavaScript 方案:
用js也得以依靠地点的笔触去模拟,完毕也特不难,推荐多少个做类似专门的学问的成熟小工具:

display: -webkit-box; 必需结合的性质,将指标作为弹性伸缩盒子模型呈现。

图片 15

1.Clamp.js

-webkit-box-orient; 必需结合的性质,设置或查究伸缩盒对象的子成分的排列格局。

.box { display: flex; justify-content: flex-end; align-items: flex-end;}

下载及文书档案地址:

text-overflow: ellipsis; 可选属性,能够用来多行文本的情形下,用省略号“…”隐敝超过范围的文书。

1.2 双项目

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

完毕效果与利益:实现多行文字截断丨前端开发者,css文本过长如何设置省略号。demo 地址

图片 16

2.jQuery插件-jQuery.dotdotdot

图片 17

.box { display: flex; justify-content: space-between;}

$(document).ready(function() {
 $("#wrapper").dotdotdot({
  // configuration goes here
 });
});

从效果上来看,它的亮点有:

图片 18

  

响应式截断,依照分歧幅度做出调度

.box { display: flex; flex-direction: column; justify-content: space-between;}

文本超过范围才展现省略号,不然不显得省略号

图片 19

浏览器原生完结,所以省略号地点显得刚好

.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center;}

唯独劣点也是很直白,因为 -webkit-line-clamp 是二个不标准的天性,它从不出现在 CSS 规范草案中。也便是说独有 webkit 内核的浏览器才支撑这些性子,像 Firefox, IE 浏览器统统都不援救那脾天性,浏览器宽容性倒霉。

图片 20

使用情状:多用来移动端页面,因为运动器材浏览器越来越多是依赖 webkit 内核,除了包容性不好,完结截断的效应不错。

.box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}

原则性元素完毕多创作本截断

图片 21

除此以外还会有一种可相信轻松的做法便是安装相对稳固的容器中度,用包括省略号(…)的成分模拟实现,完成格局如下:

.box { display: flex;}.item:nth-child(2) { align-self: center;}

p{position:relative;line-height:18px;height:36px;overflow:hidden;}p::after{content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding:020px1px45px;/* 为了呈现效果越来越好 */background:-webkit-gradient(linear,lefttop,righttop,from(rgba(255,255,255,0)),to(white),color-stop(50%,white));background:-moz-linear-gradient(toright,rgba(255,255,255,0),white50%,white);background:-o-linear-gradient(toright,rgba(255,255,255,0),white50%,white);background:-ms-linear-gradient(toright,rgba(255,255,255,0),white50%,white);background:linear-gradient(toright,rgba(255,255,255,0),white50%,white);}

图片 22

落到实处原理很好驾驭,就是经过伪成分相对定位到行尾并蒙蔽文字,再通过 overflow: hidden 隐敝多余文字。

.box { display: flex; justify-content: space-between;}.item:nth-child(2) { align-self: flex-end;}

小说来源:前端开垦者丨CSS www.rokub.com

1.3 三项目

达成效果与利益:demo 地址

图片 23

图片 24

.box { display: flex;}.item:nth-child(2) { align-self: center;}.item:nth-child(3) { align-self: flex-end;}

从达成效果与利益来看,它所怀有的亮点:

1.4 四项目

包容性好,对各大主流浏览器有好的支撑

图片 25

响应式截断,依照差别幅度做出调节

.box { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between;}

然则它不大概辨识文字的长短,即文本超出范围才显示省略号,否则不突显省略号。还恐怕有因为是我们人为地在文字末尾增加二个简短号效果,就能促成它跟文字其实未有贴合的很紧密,遭逢这种情景能够通过抬高word-break: break-all;使三个单词能够在换行时打开拆分。

图片 26

图片 27

HTML代码如下。
<div class="box"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div></div>

顺应场景:文字内容非常多,明显文字内容自然会超过容器的,那么选择这种艺术不错。

CSS代码如下。
.box { display: flex; flex-wrap: wrap; align-content: space-between;}.column { flex-basis: 100%; display: flex; justify-content: space-between;}

float 天性完毕多创作本截断

1.5 六项目

回来一方始自己要做的原委是多行标题文字截取效果,显著是无法调控标题标长度的,显明是无力回天利用上述的方法。回到事情的面目来看:大家期望CSS 能够有一种属性,能够在文字溢出的气象下展现省略号,不溢出时不呈现省略号。(二种样式,两种功用)

图片 28

正当自个儿感到 CSS 已经力不能及,只可以通过 JS 去落到实处的时候,后来看来了一个方法十一分美妙,何况能够满足上述提到的保有轨道,下边笔者就介绍怎么着通过 float 天性达成多创作本截断效果。

.box { display: flex; flex-wrap: wrap; align-content: space-between;}

基本原理:

图片 29

图片 30

.box { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between;}

有个多个盒子 div,莲灰盒子左浮动,松铁莲红盒子和色情盒子右浮动,

图片 31

当草铁青盒子的莫斯中国科学技术大学学低于血红盒子,白色盒子仍会处于深黄色盒子右下方。

HTML代码如下。
<div class="box"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div></div>

假使黄铜色色盒子文本过多,中度超越了油红盒子,则雪白盒子不会停留在右下方,而是掉到了均红盒子下。

CSS代码如下。
.box { display: flex; flex-wrap: wrap;}.row{ flex-basis: 100%; display:flex;}.row:nth-child(2){ justify-content: center;}.row:nth-child(3){ justify-content: space-between;}

好了,那样三种景况的二种体现格局已经分别开了,那么大家能够将海军蓝盒子实行绝对稳固,将内容溢出的艳情盒子移动到文本内容右下角,而未溢出的则会被移到外太空去了,只要大家运用overflow: hidden就足以遮盖掉。

1.6 九项目

图片 32

图片 33

基本原理正是那般,咱们得以将海螺红色区域想象成标题,栗褐区域想象为轻巧号效果。那么你可能会认为浅孔雀蓝盒子占了空中,那岂不是标题会全部延后了呢,这里能够透过margin的负值来出来,设置葡萄紫色盒子的margin-left的负值与海军蓝盒子的增进率一样,标题也能平常显示。

.box { display: flex; flex-wrap: wrap;}

那么大家将前方的 DOM 结构简化下,形成下边那样:

二、网格布局
2.1 基本网格布局
最简易的网格布局,就是平均布满。在容器里面平均分配空间,跟下面的骰子布局很像,不过急需设置项指标自发性缩放。

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.

图片 34

刚才的桃色盒子和石黄盒子都能够用伪成分来顶替。

HTML代码如下。
<div class="Grid"> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div></div>

.wrap{height:40px;line-height:20px;overflow:hidden;}.wrap.text{float:right;margin-left:-5px;width:100%;word-break:break-all;}.wrap::before{float:left;width:5px;content:'';height:40px;}.wrap::after{float:right;content:"...";height:20px;line-height:20px;/* 为八个省略号的幅度 */width:3em;/* 使盒子不占地方 */margin-left:-3em;/* 移动省略号地方 */position:relative;left:100%;top:-20px;padding-right:5px;}

CSS代码如下。
.Grid { display: flex;}.Grid-cell { flex: 1;}

实现效果与利益:demo 地址

2.2 百分比布局
有些网格的大幅为定位的百分比,别的网格平均分配剩余的空中。

图片 35

图片 36

此间自身日前收看最高超的秘籍了。只必要扶植 CSS 2.1 的天性就可以了,它的长处有:

HTML代码如下。
<div class="Grid"> <div class="Grid-cell u-1of4">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell u-1of3">...</div></div>

宽容性好,对各大主流浏览器有好的扶植

.Grid { display: flex;}.Grid-cell { flex: 1;}.Grid-cell.u-full { flex: 0 0 100%;}.Grid-cell.u-1of2 { flex: 0 0 50%;}.Grid-cell.u-1of3 { flex: 0 0 33.3333%;}.Grid-cell.u-1of4 { flex: 0 0 25%;}

响应式截断,根据分裂幅度做出调节

三、圣杯布局
圣杯布局)(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成四个部分:底部(header),躯干(body),尾部(footer)。个中人体又水平分为三栏,从左到右为:导航、主栏、副栏。

文本超过范围才展现省略号,否则不显得省略号

图片 37

关于短处,因为我们是模拟省略号,所以显得地点有的时候候不可能刚刚好,所以能够思虑:

HTML代码如下。
<body class="HolyGrail"> <header>...</header> <div class="HolyGrail-body"> <main class="HolyGrail-content">...</main> <nav class="HolyGrail-nav">...</nav> <aside class="HolyGrail-ads">...</aside> </div> <footer>...</footer></body>

加四个渐变效果,贴合文字,就如上述 demo 效果同样

CSS代码如下。
.HolyGrail { display: flex; min-height: 100vh; flex-direction: column;}header,footer { flex: 1;}.HolyGrail-body { display: flex; flex: 1;}.HolyGrail-content { flex: 1;}.HolyGrail-nav, .HolyGrail-ads { /* 多个边栏的小幅度设为12em / flex: 0 0 12em;}.HolyGrail-nav { / 导航放到最侧面 */ order: -1;}

增添word-break: break-all;使二个单词能够在换行时进行拆分,这样文字和轻易号贴合效果更佳。

倘若是小显示器,躯干的三栏自动变成垂直叠合。
@media (max-width: 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; }}

以此艺术应该是本人看齐最佳的用纯 CSS 管理的主意了,假使您有越来越好的秘诀,款待留言沟通!

四、输入框的布局
我们常常须要在输入框的前沿增添提醒,后方增添开关。

小说来源:前端开辟者丨CSS www.rokub.com

图片 38

HTML代码如下。
<div class="InputAddOn"> <span class="InputAddOn-item">...</span> <input class="InputAddOn-field"> <button class="InputAddOn-item">...</button></div>

CSS代码如下。
.InputAddOn { display: flex;}.InputAddOn-field { flex: 1;}

五、悬挂式布局
一时,主栏的侧面或右臂,供给丰盛三个图片栏。

图片 39

HTML代码如下。
<div class="Media"> <img class="Media-figure" src="" alt=""> <p class="Media-body">...</p></div>

CSS代码如下。
.Media { display: flex; align-items: flex-start;}.Media-figure { margin-right: 1em;}.Media-body { flex: 1;}

六、固定的底栏
突发性,页面内容太少,不能占满一屏的中度,底栏就能抬高到页面的中档。那时能够运用Flex布局,让底栏总是出现在页面包车型客车底层。

图片 40

HTML代码如下。
<body class="Site"> <header>...</header> <main class="Site-content">...</main> <footer>...</footer></body>

CSS代码如下。

.Site { display: flex; min-height: 100vh; flex-direction: column;}.Site-content { flex: 1;}

七,流式布局
每行的品类数一定,会自动分行。

图片 41

CSS的写法。
.parent { width: 200px; height: 150px; background-color: black; display: flex; flex-flow: row wrap; align-content: flex-start;}.child { box-sizing: border-box; background-color: white; flex: 0 0 25%; height: 50px; border: 1px solid red;}

(完)

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:实现多行文字截断丨前端开发者,css文本过长如