div内文字显示两行,超出两行部分省略号显示css能实现么?

html-css05

div内文字显示两行,超出两行部分省略号显示css能实现么?,第1张

只能在第一行内显示省略,不能在第二行内换行

<div style="width:200px  overflow:hidden white-space:nowrap text-overflow:ellipsis">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

上面为效果图,用ul、li的方法详细写法:

css代码:

.demoBox {

width:204px

}

.demoBox li {

float: left

width:100px

border: 1px solid #999

}

.demoBox li.demoLi {

width: 202px

}

html代码:

<ul class="demoBox">

<li>1</li>

<li>2</li>

<li class="demoLi">3</li>

</ul>

总体思路就是利用宽度和浮动来实现,给ul一个固定的宽度,第一行显示的li平分这个宽度,后面的li因为没有位置就自动去了第二行,让它独占一行,就可以实现这个效果。

以上,希望对你有帮助。