来自 前端知识 2019-11-21 21:28 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

实现多行文本的省略号显示,响应式web布局中i

响应式web布局中iframe的自适应

2016/07/13 · CSS · CSS, 响应式布局

本文小编: 伯乐在线 - 欲休 。未经小编许可,禁止转发!
应接插足伯乐在线 专辑小编。

如何用 CSS 完成多行文本的省略号展现

2017/03/31 · CSS · CSS

正文小编: 伯乐在线 - 欲休 。未经我许可,禁绝转发!
应接到场伯乐在线 专辑审核人。

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某个部分有多少校正,并增加译者的部分感想,请各位读者谅解。

理之当然的截断多创作本是件不便于的政工,大家多如牛毛使用二种办法解决:

  • overflow: hidden直接蒙蔽多余的文件
  • text-overflow: ellipsis只适用于单行文本的管理
  • 各样相比虚亏的javascript完毕。之所以说这种完毕相比较柔弱是出于需求文本长度的变型任何时候拿到回流(relayout卡塔尔国后的布局消息,如宽度

拉脱维亚语原版的书文写作时间是2011.9.18号,相比有意义的一天。然而小编忽略了WebKit提供的一个恢弘属性-webkit-line-clamp,它并非CSS标准中的属性。利用该属性实现多行文本的省略号呈现必要优秀别的多个属性:display: -webkit-box-webkit-box-orienttext-overflow: ellipsis;。其中,-webkit-line-clamp设置块成分蕴含的文件行数;display: -webkit-box安装块元素的布局为伸缩布局;-webkit-box-orient设置伸缩项的布局方向;text-overflow: ellipsis;则意味着超过盒子的部分使用简便号表示。

唯独本文将在介绍的法子是选用CSS标准中的属性,并构成特殊的完成手艺达成的。这代表在实现CSS2.1正式的浏览器中都以足以包容的,不将只是是纯粹的移动端领域,在金钱观的PC浏览器(你们知道自己指的是什么样浏览器卡塔尔国中仍然为一蹴而就的。好呢,让大家后生可畏并见识下。

困境

在响应式布局中,大家应有小心对待iframe元素,iframe成分的width和height属性设置了其调幅和中度,可是当满含块的宽窄或可观小于iframe的幅度或可观时,会现身iframe成分溢出的现象:

图片 1

与此相类似溢出的iframe会破坏页面包车型客车布局。我们得以选择意气风发种方法让iframe成分也享有响应性,翘首以待。

CSS达成多创作本溢出的省略号显示

我们把完毕的内部原因划分为7个步骤,在这里个完成进程中最简易的正是截断文本,而最难的部分则是让三个因素处在其父满含块溢出时的右下方,并且当父成分未溢出时该因素消失不可以知道。为了去难避易,我们先从比较轻易的地点起先–当父饱含框相当的小时,将子成布满局到父包罗框的右下角。

方案

iframe元素本身并不可能伸缩,除非通过js显示的安装其宽度。可是大家可通过一个iframe-container成分来包裹iframe,相同的时候让iframe-container成分的上涨的幅度充满包括块的上涨的幅度,而且遵照iframe的长度宽度比,设置iframe-container成分的padding-bottom百分比。

实则,这种方法的精华就在于设置iframe-container元素的padding-bottom属性,设置该属性的目的在于变相的安装成分的冲天。因为给padding-bottom设置比例,是对峙于父成分的width来说的,要是对height属性设置比例,则相对于父成分的height,而父元素的height值大家普通选用暗中认可的auto,因而会现身子成分height也为0.因而,大家必须要给padding-bottom设置属性。那样,只需让iframe成分充满iframe-container就可以。

CSS

.wrap { width: 400px; margin: auto; border: 5px solid greenyellow; } .iframe-container { height: 0; padding-bottom: 97.6%; position: relative; } .iframe-container iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } @media screen and (max-width: 400px) { .wrap { width: 300px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.wrap {
    width: 400px;
    margin: auto;
    border: 5px solid greenyellow;
}
.iframe-container {
    height: 0;
    padding-bottom: 97.6%;
    position: relative;
}
.iframe-container iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 400px) {
    .wrap {
        width: 300px;
    }
}

XHTML

<div class="wrap"> <div class="iframe-container"> <iframe height="498" width="510" src="" frameborder="0" allowfullscreen=""></iframe> </div> </div>

1
2
3
4
5
<div class="wrap">
    <div class="iframe-container">
        <iframe height="498" width="510" src="http://player.youku.com/embed/XOTE0MjkyODgw" frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>

结果展现的图景:

当视口宽度大于400px时:

图片 2

当视口宽度小于400px时:

图片 3

打赏援助自个儿写出越多好作品,多谢!

打赏小编

1st 引子

图片 4
图片 5
实在这里个完毕完全接纳了成分浮动的着力法规。在这里地不详细讲明CSS2.1正式中的两种状态,不明白的读者自行查阅。这段代码完成相当的轻便,正是多少个子成分和富含块的莫斯科大学及更换设置:

JavaScript

<div class="wrap"> <div class="prop">1.prop<br>float:left</div> <div class="main">2.main<br>float:right<br>Fairly short text</div> <div class="end">3.end<br>float:right</div> </div> .wrap { width: 400px; height: 200px; margin: 20px 20px 50px; border: 5px solid #AAA; line-height: 25px; } .prop { float: left; width: 100px; height: 200px; background: #FAF; } .main { float: right; width: 300px; background: #AFF; } .end { float: right; width: 100px; background: #FFA; }

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
<div class="wrap">
  <div class="prop">1.prop<br>float:left</div>
  <div class="main">2.main<br>float:right<br>Fairly short text</div>
  <div class="end">3.end<br>float:right</div>
</div>
 
.wrap {
  width: 400px; height: 200px;
    margin: 20px 20px 50px;
    border: 5px solid #AAA;
    line-height: 25px;
}
 
.prop {
    float: left;
    width: 100px; height: 200px;
    background: #FAF; }
.main {
    float: right;
    width: 300px;
    background: #AFF; }
.end {
    float: right;
    width: 100px;
    background: #FFA; }

打赏帮衬笔者写出更加的多好小说,多谢!

图片 6

1 赞 9 收藏 评论

2nd 模拟场景

我们透过创立二个子成分来替代将在显示的省略号,当文本溢出的情状下该因素展现在不利的地点上。在接下去的兑现中,我们创造了二个realend成分,并动用上意气风发节end成分浮动后的任务来兑现realend成分的恒久。

JavaScript

<div class="wrap"> <div class="prop"> 1.prop<br> float:right</div> <div class="main"> 2.main<br> float:left<br> Fairly short text</div> <div class="end"> <div class="realend"> 4.realend<br> position:absolute</div> 3.end<br>float:right </div> </div> .end { float: right; position: relative; width: 100px; background: #FFA; } .realend { position: absolute; width: 100%; top: -50px; left: 300px; background: #FAA; font-size: 13px; }

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
<div class="wrap">
  <div class="prop">
   1.prop<br>
   float:right</div>
  <div class="main">
   2.main<br>
   float:left<br>
   Fairly short text</div>
  <div class="end">
   <div class="realend">
     4.realend<br>
     position:absolute</div>
  3.end<br>float:right
  </div>
</div>
 
.end {
    float: right; position: relative;
    width: 100px;
    background: #FFA; }
.realend {
    position: absolute;
    width: 100%;
    top: -50px;
    left: 300px;
    background: #FAA; font-size: 13px; }

这一步中,大家最首要关注的是realend成分的定势,基于浮动后的end成分设置偏移量,当end成分浮动到第生机勃勃节第二章图的地点时(即在prop成分的下方卡塔 尔(阿拉伯语:قطر‎,那时候realend成分恰巧处于end成分的顶部50px,左边300px-100px=200px处,而该任务正是父富含框wrap成分的右下角,这时正是我们希望的结果:
图片 7

若父元素并不曾溢出,那么realend元素会冒出在其动手
图片 8
这种情景解决超粗略,请看下文之第七节,此处仅作实例证实。

至于笔者:欲休

图片 9

前端自由人 个人主页 · 小编的篇章 · 1 ·  

图片 10

3rd 优化定位模型

在其次节中,大家针对end元素设置了相对固定,对realend成分设置相对定位。然而大家得以行使更为简单的代码来完毕,即只行使相对固定。熟练定位模型的校友应该通晓,相对牢固的要素依旧占领文本流,同一时间仍可针对成分设置偏移。那样,就可以去掉end元素,仅针对realend成分设置相对稳定。

JavaScript

<div class="wrap"> <div class="prop">1.prop<br>float:right</div> <div class="main">2.main<br>float:left<br>Fairly short text</div> <div class="realend"> 3.realend<br>position:relative</div> </div> .realend { float: right; position: relative; width: 100px; top: -50px; left: 300px; background: #FAA; font-size: 14px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrap">
  <div class="prop">1.prop<br>float:right</div>
  <div class="main">2.main<br>float:left<br>Fairly short text</div>
  <div class="realend">
  3.realend<br>position:relative</div>
</div>
 
.realend {
    float: right;
        position: relative;
    width: 100px;
    top: -50px; left: 300px;
    background: #FAA; font-size: 14px; }

其余的质量并不修正,效果等同。

4th 削窄prop元素

时下,最左侧的prop成分的职能在于让realend成分在文件溢出时处在其正下方,在前几节的以身作则代码中为了直观的以身作则,设置prop成分的上升的幅度为100px,那么将来为了更好的模仿实际的效劳,咱们收缩渐渐压缩prop成分的大幅度。

JavaScript

<div class="wrap"> <div class="prop">1.prop<br>float:right</div> <div class="main">2.main<br>float:left<br>Fairly short text</div> <div class="realend"> 3.realend<br>position:relative</div> </div> .prop { float: left; width: 5px; height: 200px; background: #F0F; } .main { float: right; width: 300px; margin-left: -5px; background: #AFF; } .realend { float: right; position: relative; top: -50px; left: 300px; width: 100px; margin-left: -100px; padding-right: 5px; background: #FAA; font-size: 14px; }

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
<div class="wrap">
  <div class="prop">1.prop<br>float:right</div>
  <div class="main">2.main<br>float:left<br>Fairly short text</div>
  <div class="realend">
  3.realend<br>position:relative</div>
</div>
 
 
.prop {
  float: left;
  width: 5px;
  height: 200px;
  background: #F0F; }
.main {
    float: right;
    width: 300px;
    margin-left: -5px;
    background: #AFF; }
.realend {
    float: right;
        position: relative;
    top: -50px;
        left: 300px;
    width: 100px;
        margin-left: -100px;
    padding-right: 5px;
    background: #FAA; font-size: 14px; }

针对prop成分,收缩宽度为5px,别的属性不改变;

针对main成分,设置margin-left:5px,让main成分左移5px,那样main元素在大幅上就全盘占满了父成分;

对于realend成分,top、left和width的值不改变。而设置margin-left: -100pxpadding-right: 5px则是为着让realend成分的盒模型的末尾上涨的幅度总括为5px。

BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

1
BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

现实可参看小编前面包车型客车作品负margin的原理以至利用一文。

由于CSS标准规定padding的值不得以为负数,由此唯有设置margind-left为负值,且等于其调幅。那样做的尾声目标正是确认保证realend成分处在prop成分的醉生梦死,保证在文书溢出的场所下稳固正确性:
图片 11

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:实现多行文本的省略号显示,响应式web布局中i

关键词: