请问这种样式用CSS怎么写，新闻是用h2样式写的，右边的更多怎么做出来啊，怎么做他都是在h2下面啊。急急急

html-css016

请问这种样式用CSS怎么写，新闻是用h2样式写的，右边的更多怎么做出来啊，怎么做他都是在h2下面啊。急急急,第1张

h2是一个层标签，所以他的宽是100%，所以写在后面的元素会另起一行。要做到并排，就要限制h2的宽。

<div>

<h2 style=“width:100px”>新闻</h2></span>

<span style="float:right"><a href="#">更多</a></span>

</div>

在CSS中，text-overflow:ellipsis可以在文本隐藏时候在文本末尾加入省略号。所以如果Html里是用li写的。

 

li{text-overflow:ellipsisoverflow:hiddenwhite-space:nowrapdisplay:blockword-break:keep-all

本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏

这样子就可以，你可以把li改成你的元素。

这个一般是由后端的模板来实现的，纯粹靠css的话，据我个人对css的了解，是行不通的。勉强要实现的话，可以通过display:flex布局来实现，不知道效果合不合你的要求。

<style>

.flexbox{overflow:hiddendisplay:flexpadding:10pxwidth:300pxbackground-color:pink}

.flexbox h3{margin:0white-space:nowrap}

.flexbox span{flex:1padding:0 5px}

</style>

<div class="flexbox">

<h3>这个是标题这个是标题这个是</h3><span class="">...............</span>

</div>