纯 CSS 完成多写作字断开作用

日期:2020-10-29 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

原文详细地址

序言

近期在做回应式系统软件设计方案的情况下遇到必须对题目开展多写作字截取的实际效果,以下图:

看似10分简易的题目断开实际效果,可是居然沒有1个统1 CSS 特性完成规范,必须用到1些奇淫奇招来完成,1般来讲,在做这样文本断开实际效果时大家更多是期待:

适配性好,对各大流行访问器有好的适用 回应式断开,依据不一样宽度做出调剂 文字超过范畴才显示信息省略号,不然无法显示省略号 省略号部位显示信息恰好

根据上述的规则,下面我就讲详细介绍各种各样技能完成断开实际效果,并依据上述的评判规范得出最佳解。( 编码我都传到 jsfiddle 服务平台,可点一下 demo 详细地址查询 )

单写作本断开 text-overflow

文字外溢大家常常用到的应当便是 text-overflow: ellipsis 了,坚信大伙儿也很熟习,只需轻轻松松几行编码便可以完成单写作本断开。

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

完成实际效果:demo 详细地址

特性访问器原生态适用,各大访问器适配性好,缺陷便是只适用单写作本断开,其实不适用多写作本截取。

可用情景:单写作字断开最简易完成,实际效果最好是,安心应用。

假如是多写作字截取实际效果,完成起来就沒有那末轻轻松松。

-webkit-line-clamp 完成

先详细介绍第1种方法,便是根据 -webkit-line-clamp 特性完成。实际的方法以下:

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

它必须和 display、-webkit-box-orient 和 overflow 融合应用:

  • display: -webkit-box; 务必融合的特性,将目标做为延展性伸缩盒子实体模型显示信息。
  • -webkit-box-orient; 务必融合的特性,设定或查找伸缩盒目标的子元素的排序方法
  • text-overflow: ellipsis; 可选特性,能够用来多写作本的状况下,用省略号“…”掩藏超过范畴的文字。

完成实际效果:demo 详细地址

从实际效果上看来,它的优势有:

回应式断开,依据不一样宽度做出调剂 文字超过范畴才显示信息省略号,不然无法显示省略号 访问器原生态完成,因此省略号部位显示信息恰好

可是缺陷也是很立即,由于 -webkit-line-clamp 是1个不标准的特性,它沒有出現在 CSS 标准草案中。也便是说仅有 webkit 核心的访问器才适用这个特性,像 Firefox, IE 访问器通通都不适用这个特性,访问器适配性不太好。

应用情景:多用于挪动端网页页面,由于挪动机器设备访问器更多是根据 webkit 核心,除适配性不太好,完成断开的实际效果非常好。

精准定位元素完成多写作本断开

此外也有1种可靠简易的做法便是设定相对性精准定位的器皿高宽比,用包括省略号(…)的元素仿真模拟完成,完成方法以下:

p {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    /* 以便展现实际效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

完成基本原理很好了解,便是根据伪元素肯定精准定位到行尾并遮挡住文本,再根据 overflow: hidden 掩藏过剩文本。

完成实际效果:demo 详细地址

从完成实际效果看来,它所具有的优势:

适配性好,对各大流行访问器有好的适用 回应式断开,依据不一样宽度做出调剂

可是它没法鉴别文本的长短,即文字超过范畴才显示信息省略号,不然无法显示省略号。也有由于是大家人为因素地在文本结尾加上1个省略号实际效果,就会致使它跟文本实际上沒有贴合的很密不可分,遇到这类状况能够根据加上 word-break: break-all; 使1个单词可以在换行时开展拆分。

合适情景:文本內容较多,明确文本內容1定会超出器皿的,那末挑选这类方法非常好。

float 特点完成多写作本断开

返回1刚开始我要做的內容是多行题目文本截取实际效果,明显是没法操纵题目的长度的,明显是没法应用上述的方法。返回事儿的实质看来:大家期待 CSS 可以有1种特性,可以在文本外溢的状况下显示信息省略号,不外溢时无法显示省略号。(两种方式,两种实际效果)

正当性我认为 CSS 早已束手无策,只能根据 JS 去完成的情况下,后看来到了1个方式十分恰当,并且可以考虑上述提到的全部规则,下面我就详细介绍怎样根据 float 特点完成多写作本断开实际效果。

基础基本原理:

有个3个盒子 div,粉色盒子左波动,浅蓝色盒子和黄色盒子右波动,

当浅蓝色盒子的高宽比低于粉色盒子,黄色盒子仍会处在浅蓝色盒子右正下方。 假如浅蓝色盒子文字过量,高宽比超出了粉色盒子,则黄色盒子不容易滞留在右正下方,而是掉到了粉色盒子下。

好了,这样两种情况的两种展现方式早已区别开了,那末大家能够将黄色盒子开展相对性精准定位,将內容外溢的黄色盒子挪动到文字內容右下角,而未外溢的则会被移到外太空去了,要是大家应用 overflow: hidden 便可以掩藏掉。

基础基本原理便是这样,大家能够将浅蓝色地区想像成题目,黄色地区想像为省略号实际效果。那末你将会会感觉粉色盒子占了室内空间,那岂并不是题目会总体延后了吗,这里能够根据 margin 的负值来出来,设定浅蓝色盒子的 margin-left 的负值与粉色盒子的宽度同样,题目也能一切正常显示信息。

那末大家将前面的 DOM 构造简化下,变为下面这样:

<div class="wrap">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
</div>

刚刚的粉色盒子和黄色盒子都可以以用伪元向来替代。

.wrap {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.wrap .text {
  float: right;
  margin-left: ⑸px;
  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;
  /* 为3个省略号的宽度 */
  width: 3em;
  /* 使盒子不占部位 */
  margin-left: ⑶em;
  /* 挪动省略号部位 */
  position: relative;
  left: 100%;
  top: ⑵0px;
  padding-right: 5px;
}

完成实际效果:demo 详细地址

这里我现阶段看到最恰当的方法了。只必须适用 CSS 2.1 的特点便可以了,它的优势有:

1.适配性好,对各大流行访问器有好的适用

2.回应式断开,依据不一样宽度做出调剂

3.文字超过范畴才显示信息省略号,不然无法显示省略号

至于缺陷,由于大家是仿真模拟省略号,因此显示信息部位有时没法不久好,因此能够考虑到:

1.加1个渐变色实际效果,贴合文本,就像上述 demo 实际效果1样

2.加上 word-break: break-all; 使1个单词可以在换行时开展拆分,这样文本和省略号贴合实际效果更佳。

总结

以上所述是网编给大伙儿详细介绍的纯 CSS 完成多写作字断开作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!