Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

超过行数的文本用省略号替代 #178

Open
TieMuZhen opened this issue Apr 20, 2022 · 0 comments
Open

超过行数的文本用省略号替代 #178

TieMuZhen opened this issue Apr 20, 2022 · 0 comments
Labels
CSS

Comments

@TieMuZhen
Copy link
Owner

TieMuZhen commented Apr 20, 2022 •
edited
Loading

单行文字的省略

<style>
  .test {
    width: 100px;
    border: 1px solid red;
    white-space: nowrap; /* 文本内的换行无效 */
    overflow: hidden; /* 溢出部分隐藏 */
    text-overflow: ellipsis;  /* 文本溢出时显示省略号来代表被修剪的文本 */
  }
</style>
 
<body>
  <div class="test">爱的发放到更加了解嘎多凉快加大科技嘎考虑过价格地方建安费教大家覅OA二级发挥地方好</div>
</body>

效果如下
image

多行文字的省略

<style>
  .test {
    width: 100px;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 指定一个box子元素是否应按水平或垂直排列 */
    -webkit-line-clamp: 2; /* 把内容限制为指定的行数，只有在 display 属性设置成 -webkit-box才有效 */
  }
</style>
<body>
  <div class="test">爱的发放到更加了解嘎多凉快加大科技嘎考虑过价格地方建安费教大家覅OA二级发挥地方好</div>
</body>

效果如下
image

这个省略的效果也可以用js来做：

function subEllipsis(content) {
    content = content.length>24 ? content.substring(0,23)+'...' : content
}

js的做法适用于最多适配多少个字符的情况，但是如果想控制显示几行的话，css的方式显然更加方便
@TieMuZhen TieMuZhen added the CSS label Apr 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@TieMuZhen