一、CSS样式 解决文字过长显示省略号问题
1、一般样式
一般 css 样式,当宽度不够时,可能会出现换行的效果。这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-overflow</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script> <style type="text/css"> .demo-split { width: 500px; height: 100px; border: 1px solid #dcdee2; background: palegreen; } .demo-split-pane { padding: 10px; color: red; } </style> </head> <body> <div id="app"> <div class="demo-split"> <Split v-model="split"> <div slot="left" class="demo-split-pane"> 未使用 clip 自适应宽度 </div> <div slot="right" class="demo-split-pane"> 未使用 ellipsis 自适应宽度 </div> </Split> </div> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data() { return { split: 0.4 } } }) </script> </html>
左侧宽度变小,文字换行。
右侧宽度变小,文字换行。
2、文字过长显示省略号或显示截取的效果