css一行新闻域固定一个长度 标题溢出隐藏能实现了 标题长度不够 自动填充怎么实现

html-css024

css一行新闻域固定一个长度 标题溢出隐藏能实现了 标题长度不够 自动填充怎么实现,第1张

这个一般是由后端的模板来实现的,纯粹靠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>

用js增加距离即可···

祝你成功

如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style>

.main_box{ width:500pxheight:500pxfont-size:12pxcolor:#666}

.tr,.tr2{ width:500pxheight:23pxfloat:leftline-height:23px}

.tr2{ margin-bottom:20px}

</style>

</head>

<body>

<div class="main_box" id="qqqq">

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

<div class="tr">·如何控制新闻列表,让其每5行,自动回车。 您的回答能详细说明一下吗</div>

</div>

<script type="text/javascript">

var aa=document.getElementById('qqqq').getElementsByTagName('div')

var bb=aa.length

for( i=1i<bbi++)

{

if(i%5==0)

{

document.getElementsByTagName('div')[i].className='tr2'

}

else{

document.getElementsByTagName('div')[i].className='tr'

}

}

</script>

</body>

</html>

你的意思是通过CSS的样式来正则采集新闻页面的URL是吧?

采集是涉及到正则方面的知识的.

大概示范一下:

<div id='one'><a href="1.html">1</a></div>

<div id='one'><a href="2.html">2</a></div>

<div id='one'><a href="3.html">3</a></div>

上例只有URL链接和名称不一样.用 * 代表

<div id='one'><a href="(*)">(*)</a></div>

然后第一个*,第二个*分别为采集的结果

你可以百度一下“WEB易学” 上面有教学视频。高洛峰PHP视频里面有正则教程