如何使用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中的文字属性设置溢出文本属性展示
  • css背景怎么占满屏幕
  • 在js中如何实现dom元素节点的替换和删除
  • APP项目hbuilder开发心得-a标签创建新页面
  • 零基础不建议学前端
  • jquery实现当输入11位数字时自动判断结果
  • 热门搜索
    金佛山旅游攻略 海南旅游价格 仙女山旅游攻略 库车旅游 汕尾红海湾旅游攻略 福建省旅游 包头旅游景点大全 郑州旅游学院 北京联合大学旅游学院 旅游预订