澳门在线威尼斯官方 > 威尼斯澳门在线 > 响应式web布局中iframe的自适应,实现多行文本的

原标题:响应式web布局中iframe的自适应,实现多行文本的

浏览次数:64 时间:2019-12-12

响应式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)后的布局音讯,如宽度

克罗地亚语原稿写作时间是二零一一.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布局中iframe的自适应,实现多行文本的

关键词:

上一篇:Web质量优化连串

下一篇:深入显出Nodejs读书笔记,出浅入深NodeJS