css & auto height & overflow: hidden;

css & auto height & overflow: hidden;

{overflow: hidden; height: 100%;} is the panacea!

{溢出：隐藏;身高：100％;}是灵丹妙药！

https://forum.textpattern.com/viewtopic.php?id=20059

https://stackoverflow.com/questions/9942026/can-i-use-overflowhidden-without-an-explicit-height-somehow

https://css-tricks.com/forums/topic/css-height-and-overflow/

https://css-tricks.com/almanac/properties/o/overflow/

css hack

overflow: hidden;

1. 没有指定高度，永远不会溢出；
2. 高度是有内容自动撑出来的

https://css-tricks.com/almanac/properties/o/overflow/#article-header-id-2

bug

OK

---

https://github.com/xgqfrms/CSS3/issues/7

css ellipsis after 2 lines

https://stackoverflow.com/questions/31698413/how-can-i-do-text-overflow-ellipsis-on-two-lines/34563610

https://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

https://codepen.io/xgqfrms/pen/gNxpMe

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---