首页 > 帮助中心 > 网站建设相关问题 > css控制标题长度超出部分显示省略号

资讯分类



css控制标题长度超出部分显示省略号

日期:2018-02-22    共阅 [ 605 ] 次

.css2 {
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20em;/*不允许出现半汉字截断*/
color:#6699ff;
border:1px #ff8000 dashed;
}


设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

对应的脚本特性为text-Overflow。

---------------------------------------------------------------------------------

语法:   text-overflow : clip | ellipsis  

参数:   

   clip : 不显示省略标记(...),而是简单的裁切   

   ellipsis : 当对象内文本溢出时显示省略标记(...)   

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。   

--------------------------------------------------------------------------------

语法:
overflow : visible | auto | hidden | scroll
取值:
visible :  默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto :  在必需时对象内容才会被裁切或显示滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。   

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果   

三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果:



实例演示:

<style>
.css2 {
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 10em;/*不允许出现半汉字截断*/
color:#666666;
border:1px #ff8000 dashed;
}
</style>


<ul>
<li class="css2">一般我们看到的比如新闻列表,为了使文字不回行,控制字数,会通过程序让多余的字符显示省略号,我们只使用CSS可以达到同样的效果,虽然不完美。</li>
</ul>




 

 

基础产品服务
域名注册
虚拟主机
云服务器
企业邮箱
服务器托管
服务器租用
网站营销
智能建站
产品管理平台
企业解决方案
400电话
网站建设
在线客服系统
服务器运维
优化营销
数据恢复
Mysql数据库
SQL数据库
技术文档
合同文本
站长必备软件
实例与代码
代理文档
精品作品
站长论坛
展览馆
HTML5炫
关键词密度分析
IP归属地查询
备案查询
SEO查询
百度权重查询
solidworks
保持接触
联系电话:15810326078
010-68924881
技术QQ:12491287
商务QQ:22392247
技术邮箱: cpoo@163.com
联系方式
畅景论坛
客服&帮助
扫码领红包
新闻公告
代理加盟
如何网站备案
付款方式
索取发票
渠道合作
帮助中心
网站地图

微信咨询/联系:

↑ 扫描加微信咨询

北京辟谣平台 违法不良信息举报

关于畅景| 联系我们| 付款方式| 网站备案| 帮助中心| 畅景资讯| 相关下载 ||||
本站产品全面支持在线支付,自主开通及管理! 域名注册,域名查询,域名申请,虚拟主机,企业邮箱,网站建设,云主机,网络推广尽在畅景互联
版权所有 www.cpoo.com.cn 京ICP备12015531号-8 京公网安备110105018078   北京新网(Xinnet.com)认证注册服务机构 新网授权代理商

十年历史见证 超过9000家客户信誉保障 腾讯在线QQ客服:12491287 22392247

客户服务中心(7×24):15810326078 传真:010-68924881-2288