黄石网站建设

黄石网页设计

黄石网站制作

黄石网络推广

黄石做网站的公司

黄石建站

博强科技

您的当前位置 >> 主页 > 新闻动态 > 网站建设技术 >

网站建设技术

新闻图案

网站制作

CSS文字缩略 文字超出变省略号

中国网络营销推广专家

 CSS在布局的时候,会考虑到网页整体效果,会把超出某个DIV的文字自动省略,显示省略号,倘若不用CSS,那就需要用服务器端动态脚本来截取 文字来实现了。杀鸡还是不要用牛刀,能在客户端实现的就不要交给服务器了。费话不多说了,本篇 CSS教程向你演示如何自动缩略超出的文字,变成省略号。先来看CSS定义部分的代码:

<style type="text/css">
.divout {
display: inline-block;
white-space: nowrap;
word-wrap: normal;
width: 100%;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
}
</style>

HTML测试代码部分:
<div class="divout" style="width:200px;">
黄石网站建设就选博强科技。
</div>

 

运行结果如下:

黄石网站建设

 这样就把超出部分的文字自动隐藏了,CSS并为其自动添加了“…”省略号,很实用吧?

收缩

QQ在线客服

  • 在线咨询
  • 客服001
  • 客服001
  • 售后服务
  • 客服001
黄石建站

QQ在线客服

首 页 新闻动态 案例展示 服务范围 关于我们 联系我们 客户需求 网站地图
电话:13597671188 QQ:494602646 黄石网站建设-博强科技 Copyright © 2013-2014 All Rights Reserved 鄂ICP备12000085号
博强科技版权所有 未经允许不得私自发布转载