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

　　一、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>

　　<pid="app">

　　<pclass="demo-split">

　　<Splitv-model="split">

　　<pslot="left"class="demo-split-pane">

　　未使用clip自适应宽度</p>

　　<pslot="right"class="demo-split-pane">

　　未使用ellipsis自适应宽度</p>

　　</Split>

　　</p>

　　</body>

　　<scripttype="text/javascript">

　　newVue({

　　el:'#app',

　　data(){return{

　　split:0.4

　　}

　　})</script></html>

　　左侧宽度变小，文字换行。

本文转载自励志网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56213.shtml