CSS样式怎么解决文字过长显示省略号问题
这篇文章主要介绍了CSS样式怎么解决文字过长显示省略号问题的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS样式怎么解决文字过长显示省略号问题文章都会有所收获,下面我们一起来看看吧。
创新互联技术团队十年来致力于为客户提供网站设计制作、网站设计、品牌网站制作、网络营销推广、搜索引擎SEO优化等服务。经过多年发展,公司拥有经验丰富的技术团队,先后服务、推广了近1000家网站,包括各类中小企业、企事单位、高校等机构单位。
CSS样式 解决文字过长显示省略号问题
1、一般样式
一般 css 样式,当宽度不够时,可能会出现换行的效果。这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题。
text-overflow 未使用 clip 自适应宽度未使用 ellipsis 自适应宽度
左侧宽度变小,文字换行。
右侧宽度变小,文字换行。
2、文字过长显示省略号或显示截取的效果
【通常写法:】 【说明:】 text-overflow:表示当文本溢出时是否显示省略标记,ellipsis表示省略号效果,clip 表示截取的效果。 overflow:hidden; 将文本溢出的内容隐藏。 white-space:nowrap; 是禁止文字换行。 width: (可选)可以写固定值,也可以根据宽度自适应显示效果。
text-overflow text-overflow : clip
不显示省略标记,而是简单的裁切条
text-overflow : ellipsis
当对象内文本溢出时显示省略标记
自定义宽度,根据宽度自适应大小
使用 clip 自适应宽度使用 ellipsis 自适应宽度
clip 显示裁剪的效果,ellipsis 显示省略号的效果。
关于“CSS样式怎么解决文字过长显示省略号问题”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“CSS样式怎么解决文字过长显示省略号问题”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
网站栏目:CSS样式怎么解决文字过长显示省略号问题
标题链接:http://scyanting.com/article/poceph.html