加入收藏 | 设为首页 | 会员中心 | 我要投稿 济南站长网 (https://www.0531zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 经验 > 正文

利用css设置内容超出后显示省略号的解决方法

发布时间:2022-02-14 10:00:00 所属栏目:经验 来源:互联网
导读:这篇文章主要为大家详细介绍了利用css设置内容超出后显示省略号的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。在html代码页面找到body标签,在body标签里创建一个p标签,然后输入显示的内容并添加一个cl
  这篇文章主要为大家详细介绍了利用css设置内容超出后显示省略号的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。在html代码页面找到<body>标签,在<body>标签里创建一个<p>标签,然后输入显示的内容并添加一个class类为 class="cont"。
 
  
  找到<title>标签,在这个标签下面创建一个<style>标签,在<style>标签里设置class为cont的样式内容超出后为隐藏
 
  <style>
 
  .cont{
 
  overflow: hidden;/*内容超出后隐藏*/
 
  text-overflow: ellipsis;/* 超出内容显示为省略号*/
 
  white-space: nowrap;/*文本不进行换行*/
  width:300px; height:30px;/*设置文字显示的区域宽度和高度*/
 
  }
 
  </style>

(编辑:济南站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读