CSS样式如何解决文字过长显示省略号问题
导读:本文共2876.5字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、CSS样式 解决文字过长显示省略号问题1、一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果。这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题。<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。一、CSS样式 解决文字过长显示省略号问题
1、一般样式
一般 css 样式,当宽度不够时,可能会出现换行的效果。这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题。
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>text-overflow</title><linkrel="stylesheet"type="text/css"href="http://unpkg.com/view-design/dist/styles/iview.css"><scripttype="text/javascript"src="http://vuejs.org/js/vue.min.js"></script><scripttype="text/javascript"src="http://unpkg.com/view-design/dist/iview.min.js"></script><styletype="text/css">.demo-split{width:500px;height:100px;border:1pxsolid#dcdee2;background:palegreen;}.demo-split-pane{padding:10px;color:red;}</style></head><body><divid="app"><divclass="demo-split"><Splitv-model="split"><divslot="left"class="demo-split-pane">未使用clip自适应宽度</div><divslot="right"class="demo-split-pane">未使用ellipsis自适应宽度</div></Split></div></div></body><scripttype="text/javascript">newVue({el:'#app',data(){return{split:0.4}}})</script></html>
左侧宽度变小,文字换行。
右侧宽度变小,文字换行。
2、文字过长显示省略号或显示截取的效果
【通常写法:】<styletype="text/css">.test_demo_clip{text-overflow:clip;overflow:hidden;white-space:nowrap;width:200px;background:palegreen;}.test_demo_ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:200px;background:palegreen;}</style>【说明:】text-overflow:表示当文本溢出时是否显示省略标记,ellipsis表示省略号效果,clip表示截取的效果。overflow:hidden;将文本溢出的内容隐藏。white-space:nowrap;是禁止文字换行。width:(可选)可以写固定值,也可以根据宽度自适应显示效果。
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>text-overflow</title><linkrel="stylesheet"type="text/css"href="http://unpkg.com/view-design/dist/styles/iview.css"><scripttype="text/javascript"src="http://vuejs.org/js/vue.min.js"></script><scripttype="text/javascript"src="http://unpkg.com/view-design/dist/iview.min.js"></script><styletype="text/css">.test_demo_clip{text-overflow:clip;overflow:hidden;white-space:nowrap;width:200px;background:palegreen;}.test_demo_ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:200px;background:palegreen;}.test_demo_defined_Width_clip{text-overflow:clip;overflow:hidden;white-space:nowrap;background:bisque;}.test_demo_defined_Width_ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background:bisque;}.demo-split{width:500px;height:100px;border:1pxsolid#dcdee2;background:palegreen;}.demo-split-pane{padding:10px;}</style></head><body><divid="app"><h3>text-overflow:clip</h3><divclass="test_demo_clip">不显示省略标记,而是简单的裁切条</div><br><h3>text-overflow:ellipsis</h3><divclass="test_demo_ellipsis">当对象内文本溢出时显示省略标记</div><br><h3>自定义宽度,根据宽度自适应大小</h3><divclass="demo-split"><Splitv-model="split"><divslot="left"class="demo-split-pane"><divclass="test_demo_defined_Width_clip">使用clip自适应宽度</div></div><divslot="right"class="demo-split-pane"><divclass="test_demo_defined_Width_ellipsis">使用ellipsis自适应宽度</div></div></Split></div></div></body><scripttype="text/javascript">newVue({el:'#app',data(){return{split:0.4}}})</script></html>
clip 显示裁剪的效果,ellipsis 显示省略号的效果。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
CSS样式如何解决文字过长显示省略号问题的详细内容,希望对您有所帮助,信息来源于网络。