网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

如何使用CSS3中的文字属性设置溢出文本属性展示

时间:2024-10-14 08:43:46

1、第一步,打开HBuilderX工具,新建一个静态页面并插入一个div标签,添加很长的内容,如下图所示:

如何使用CSS3中的文字属性设置溢出文本属性展示如何使用CSS3中的文字属性设置溢出文本属性展示

2、第二步,使用div标签的类选择器,设置宽度、内边距和边框,如下图所示:

如何使用CSS3中的文字属性设置溢出文本属性展示

3、第三步,保存代码并打开浏览器预览页面,可以发现文字内容溢出了边框,如下图所示:

如何使用CSS3中的文字属性设置溢出文本属性展示

4、第四步,再次添加一个文本属性text-overflow,设置对应的值为clip,如下图所示:

如何使用CSS3中的文字属性设置溢出文本属性展示如何使用CSS3中的文字属性设置溢出文本属性展示

5、第五步,再次在text-overflow下添加属性white-space和overflow,如下图所示:

如何使用CSS3中的文字属性设置溢出文本属性展示如何使用CSS3中的文字属性设置溢出文本属性展示

6、第六步,再次将text-overflow属性值改为ellipsis,然后查看显示效果,如下图所示:

如何使用CSS3中的文字属性设置溢出文本属性展示
© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com