PHP前端开发

css显示省略号怎么设置

百变鹏仔 3个月前 (09-19) #CSS
文章标签 省略号
css显示省略号的设置步骤:overflow: hidden; 隐藏超过容器边界的文本。white-space: nowrap; 禁止文本换行。其他设置:text-overflow: ellipsis; 在省略号前显示文本。overflow-x: hidden; 仅隐藏水平超出边界的文本。overflow-y: hidden; 仅隐藏垂直超出边界的文本。

css显示省略号的设置

设置步骤:

  1. overflow: hidden;:隐藏超过容器边界的文本。
  2. white-space: nowrap;:禁止文本换行。

示例代码:

div {  width: 100px;  overflow: hidden;  white-space: nowrap;}

效果:

立即学习“前端免费学习笔记(深入)”;

该 div 会将超出 100px 宽的文本隐藏,只显示部分文本。

其他设置:

完整示例(使用 ellipsis):

div {  width: 100px;  overflow: hidden;  text-overflow: ellipsis;}

效果:

立即学习“前端免费学习笔记(深入)”;

该 div 会在省略号前显示超出 100px 宽的文本。