css实现文字过长显示省略号

1、css实现文字过长显示省略号一、css样式解决文字过长显示省略号问题 1、普通样式 普通css样式，当宽度不够时，可能会浮现换行的效果。这样的效果在某些时候绝对是不可的，可以修改css样式来解决这个问题。 text-overflow .demo-split width:500px; height:100px; border:1pxsoliddcdee2; background:palegreen; .demo-split-pane padding:10px; color:red; 未用法clip自适应宽度 未用法ellipsis自适应宽度 newvue( el:&39;app&

2、39;, data()return split:0.4 ) 左侧宽度变小，文字换行。 (推举学习：css教程) 右侧宽度变小，文字换行。 2、文字过长显示省略号或显示截取的效果 【通常写法：】 .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; b

3、ackground:palegreen; 【解释：】 text-overflow：表示当文本溢出时是否显示省略标志，ellipsis表示省略号效果，clip表示截取的效果。 overflow:hidden;将文本溢出的内容躲藏。 white-space:nowrap;是禁止文字换行。 width：（可选）可以写固定值，也可以按照宽度自适应显示效果。 text-overflow .test_demo_clip text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:palegreen; .t

4、est_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:1pxsoliddcdee2; background:palegreen; .demo-split-pane padding:10px; text-overflow:clip 不显示省略标志，而是容易的裁切条 text-overflow:ellipsis 当对象内文本溢出时显示省略标志 自定义宽度，按照宽度自适应大小 用法clip自适应宽度 用法ellipsis自适应宽度 newvue( el:&39;app