CSS ellipsis 与 padding 融合时的难题详解

日期:2021-02-28 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

CSS 完成的文字断开

调查以下编码完成文字超过全自动断开的款式编码:

.truncate-text⑷ {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

应用以下的 HTML 片断开展检测:

<style>
  .my-div {
    width: 300px;
    margin: 10px auto;
    background: #ddd;
  }
</style>
<div class="my-div truncate-text⑷">
  How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike James.
  Thursday, 16 February 2017. Sometimes simple algorithms are just wrong. In
  this case shuffling an .... In other words as the array is scanned the element
  under
</div>

运作实际效果:

根据 CSS ellipsis 完成的文字断开实际效果

padding 的难题

1切都很完善,直至给文字器皿再加 padding 款式后。

  .my-div {
    width: 300px;
    margin: 10px auto;
    background: #ddd;
+    padding: 30px;
  }
如今的实际效果

如今的实际效果是这样的:

padding 破坏了文字断开

由于 padding 占了元素內部室内空间,但这一部分地区确是在元素內部的,因此不容易受 overflow: hidden 危害。

处理方法

line-height

当设定的 line-height 适度时,或充足大时,能够将 padding 的一部分相抵掉以完成将过剩一部分挤出可见范畴的总体目标。

.my-div {
  width: 300px;
  margin: 10px auto;
  background: #ddd;
  padding: 30px;
+  line-height: 75px;
}

根据 line-height 修补

这类方法其实不可用全部情景,由于并不是全部地区都必须那末大的行高。

更换掉 padding

padding 不过是要给元素的內容与边框间加上间距,或是与其他元素间加上间距。这里能够考虑到实际上方法来更换。

例如 margin。但假如元素有情况,例如本例中,那 margin 的试就不可用了,由于元素 margin 一部分是不带情况的。

还能用 border 替代。

.my-div {
  width: 300px;
  margin: 10px auto;
  background: #ddd;
-  padding: 30px;
+  border: 30px solid transparent;
}

应用 border 更换 padding

绝不出现意外,它依然有它的局限性。便是在元素自身有自身的 border 款式规定的情况下,就会矛盾了。

将边距与內容器皿分开

较为普适的方式将会便是它了,将要內容与边距分开到两个元素上,1个元素专业用来完成边距,1个元素用来完成文字的断开。这个好了解,立即看编码:

<div className="my-div">
  <div className="truncate-text⑷">
    How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike
    James. Thursday, 16 February 2017. Sometimes simple algorithms are just
    wrong. In this case shuffling an .... In other words as the array is scanned
    the element under
  </div>
</div>

而大家的款式能够维持没动。

将边距与內容器皿分开

有关資源

overflow:hidden ignoring bottom padding

How can I force overflow: hidden to not use up my padding-right space

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。