css & text-overflow & ellipsis

css & text-overflow & ellipsis

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

.auto-text-width-ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

css text overflow ellipsis multiline

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

.news-card-content-title {
    width: 100%;
    height: 0.8rem;
    line-height: 0.4rem;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: calc(4.8rem);
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
}

demo

https://codepen.io/webgeeker/pen/gZQxLr

.auto-text-width-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
}

https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text

css & bottom border

---

CSS ellipsis

1. 单行

.single-line{
  width: 462px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

2. 多行

.multi-lines{
  width: 462px;
  display: block;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

refs

---

---

©xgqfrms 2012-2020

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---