css 文本省略（单行/多行/英文不换行）

你管我管你疯啊

于 2021-11-24 15:08:04 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

分类专栏： css-知识总结文章标签： git vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45527865/article/details/121516056

css-知识总结专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用CSS和JavaScript实现单行及多行文本的省略显示，包括word-break属性在处理英文多行不换行的情况下的应用。通过设置width、overflow、text-overflow和white-space等样式属性，可以有效地在有限的空间内展示关键信息，同时保持布局的整洁。对于多行文本省略，结合-webkit-line-clamp和-webkit-box-orient属性，可以实现特定行数的文本显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单行文本省略

    width:200px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

多行文本省略

    width:200px;
	white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

英文字母多行不换行

  word-break: break-all; //多行文本添加这一行

在这里插入图片描述