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

2023-04-21 03:47:01html-css08

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>

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

</div>

你要在css中定义一个div 或者 span 其中包括了这个小图标可以作为背景；

在html输出前对你的新闻是否是最新的做判断，如果是最新的就在输出新闻标题的后边输出你定义好的包含小图标的标签；即可；

其实这样的小图标一般都是插在html中的；就是先对这样的图标做好样式定义，然后根据情况判断，再输出显示就可以了；

<!doctype html>

<html>

<head>

@charset "utf-8"

/* CSS Document */

*{margin:0padding:0font-family:"微软雅黑"}

ul,ol,li{list-style:none}

a,u{text-decoration:none}

#top,#nav,#banner,#news,#wlsc,#yqlink,#bottom{margin:0 auto}

/*-top-*/

#top{width:1000pxheight:100px}

#logo{width:732pxheight:59pxfloat:leftpadding:41px 0 0 21px}

img{border:0}

#sear{width:247pxheight:61pxfloat:leftpadding-top:39px}

#search{height:26px line-height:26pxborder:1px solid #e5e5e5border-right:noneoutline:nonebackground: #f1f1f1float:leftcolor:#818181}

#fin{width:26pxheight:26pxline-height:26pxborder:nonebackground: #f1f1f1 url(../images/sear.jpg) no-repeat centerfloat:left}

.ffin{height:26pxwidth: 26pxborder:1px solid #e5e5e5float:leftborder-left:none}

/*-nav-*/

#nav{width:1000pxheight:59pxbackground:#000}

#nav ul li{width:119px height:59pxline-height:59pxtext-align:centerborder-right:1px solid #484848float:left}

#tttt{border:0}

#nav a{color:#fff}

/*-banner-*/

#banner{width:1000pxheight:463px}

#news{width:1000pxheight:240px}

#news1{width:456pxheight:183pxfloat:leftpadding:36px 25px 22px 19pxfloat:left}

#news1 h2{font-size:18pxfont-weight:100color:#191919width:78pxmargin-bottom:22px}

#news1 ul{font-size:12pxwidth:452pxline-height:24px}

#news1 ul a{color:#5c5c5cwidth:300pxoverflow:hiddenwhite-space:nowrapfloat:lefttext-overflow:ellipsis}

#news1 ul span{float:rightpadding-right:28px}

#news1 ul li a{background:url(../images/dian.jpg) no-repeat left centerpadding-left:14pxcolor:#929292}

#news2{width:240pxheight:240pxbackground:#f1f1f1float:left}

#news2 h2{font-size:18pxfont-weight:100color:#515151margin:36px 0 39px 25px}

#news2 h3{font-size:12pxcolor:#515151margin:0 0 13px 25pxline-height:12px}

#news2 h4{font-size:11pxcolor:#515151margin:0 0 27px 25pxline-height:12px}

#news2 p{width:190pxfont-size:11pxfont-weight:100color:#8c8c8cmargin:0 0 0 25pxline-height:20px}

#news3{width:260pxheight:240pxbackground:url(../images/hua.jpg) no-repeat #fbfbfb 164px 121pxfloat:left}

#news3 h2{font-size:18pxfont-weight:100color:#222padding:36px 0 21px 25px}

#news3 p{width:180pxfont-size:12pxfont-weight:100line-height:24pxpadding:0 25px 0 25pxcolor:#595959}

#news3 div{padding:56px 0 0 25px}

/*-wlsc-*/

#wlsc{width:1000pxheight:276px}

#wlsc dl{width:230pxpadding-left:20pxfloat:left}

.miao{width:204pxfont-size:12pxline-height:2emcolor:#575757}

#wlsc h2{font-size:18pxcolor:#212121margin:30px 0 17px 23pxline-height:18pxfont-weight:100}

/*-yqlink-*/

#yqlink{width:1000pxheight:249pxbackground:#e5e5e5}

#yqlink1{width:480pxheight:249pxpadding:0 0 0 20pxfloat:left}

#yqlink1 h2{font-size:16pxfont-weight:100color:#5e5e5ewidth:432pxborder-bottom:1px solid #c1c1c1padding:31px 0 11px 12px}

#yqlink1 ul li{font-size:12pxline-height:24pxbackground:url(../images/dayu.jpg) no-repeat 0 center padding-left:10px}

#yqlink1 ul{float:leftwidth:150pxheight:200pxpadding-top:10px}

#yqlink1 a{color:#8c8c8c}

#yqlink2{width:180pxheight:249pxpadding:0 0 0 20pxfloat:left}

#yqlink2 h2{font-size:16pxfont-weight:100color:#5e5e5ewidth:160pxborder-bottom:1px solid #c1c1c1padding:31px 0 11px 12px}

#yqlink2 ul li{font-size:12pxline-height:24pxbackground:url(../images/dayu.jpg) no-repeat 0 center padding-left:10px}

#yqlink2 a{color:#8c8c8c}

#yqlink2 ul{padding-left:10pxpadding-top:10px}

#yqlink3{width:280pxheight:249pxpadding:0 0 0 20pxfloat:left}

#yqlink3 h2{font-size:16pxfont-weight:100color:#5e5e5ewidth:240pxborder-bottom:1px solid #c1c1c1padding:31px 0 11px 12px}

#yqlink3 img{margin:15px 0 0 20px}

#bzottom{width:1000pxheight:83px}

#bot1{width:361pxheight:58pxmargin:24px 0 1px 21pxfloat:left}

.shu{font-size:12pxpadding-right:7pxborder-right:1px solid #7e7e7ecolor:#888}

.shu1{font-size:12pxpadding-right:7pxcolor:#888}

#bot2{width:610pxheight:83pxfloat:leftclear:right}

#bot2 p{font-size:12pxcolor:#888margin-top:27px}

</style>

</head>

<body>

</form>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="#">新闻条新闻条新闻条新条新闻条新闻条新闻条新闻条新闻条新闻条新闻条</a><span>2016-12-02</span></li>

<li><a href="#">新闻条新闻条新闻条新闻条新闻条新闻条新条新闻条新闻条新闻条新闻条</a><span>2016-12-02</span></li>

<li><a href="#">新闻条新闻条新闻条新新闻条条新闻条新闻条新新闻条新闻条新闻条闻条</a><span>2016-12-02</span></li>

<li><a href="#">新闻条新闻条新闻条新新闻条新条新闻条新闻条新闻条新闻条新闻条闻条</a><span>2016-12-02</span></li>

<li><a href="#">新闻条新闻条新闻条新闻条新闻条新条新闻条新闻条新闻条新闻条新闻条</a><span>2016-12-02</span></li>

<li><a href="#">新闻条新闻条新闻条新闻条新闻条新闻条新条新闻条新闻条新条</a><span>2016-12-02</span></li>

</ul>

</div>

<h3>公司成立于1984年，</h3>

<p>公司怎么样怎么样怎么样怎么样怎么样怎么样怎么样</p>

</div>

<p>我们要招人我们要招人我们要招人我们要招人</p>

</div>

<dl>

<dd class="miao">我是描述我是描述我是描述我是描述我是描述我是描述</dd>

</dl>

<dl>

<dd class="miao">我是描述我是描述我是描述我是描述我是描述我是描述</dd>

</dl>

<dl>

<dd class="miao">我是描述我是描述我是描述我是描述我是描述我是描述</dd>

</dl>

<dl>

<dd class="miao">我是描述我是描述我是描述我是描述我是描述我是描述</dd>

</dl>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</a>

</div>

<a href="#" class="shu1">采购系统入口</a>

</div>

</div>

</body>

</html>

你把文字和图片改一下就可以了

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：CSS中设定字体如何设定为微软雅黑 Bold字体？

# 下一篇：新人做discuzX2.5模板求指导如何调用CSS文件谢谢~

推荐阅读

热门文章

最新发布

标签列表

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

给您推荐相同类型的内容：

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