如何设置CSS样式使网页中过长的新闻标题后面以省略号显示

Posted 2023-05-17

说的明白点，急哭

给相应的 html 标签 设置 CSS:

text-overflow : ellipsis

追问

不明白怎么设置，能不能再说的详细点

追答

你的 新闻 标题 在哪个 标签里?

比如:

你的网页代码中 

<div class="title">这里是新闻标题</div>

那么你就 给上面的div , 或者 是title 设置 上面的css.

再不懂的话, 直接私信我.

追问

我用的是

所以我还是不明白

参考技术A <div style="width:100px;height:50px;background:red;overflow:hidden;text-overflow:ellipsis;">1111111111111111111111111111</div>追问

我用的是

所以我还是不明白

追答

overflow:hidden;溢出隐藏

text-overflow:ellipsis;溢出显示...

把这两个属性加进去就行了。

如果内容是中文

还要加white-space:pre;word-break:break-all;

<div style="width:100px;height:50px;background:red;overflow:hidden;text-overflow:ellipsis;white-space:pre;word-break:break-all;">中中中中中中中中中中中中中中中中中中中中</div>

追问

菜鸟不知道这两个东西该插在哪里，能不能有一个具体的呢，一条新闻演示，谢谢

追答<style type="text/css">
ul liwidth:100px;height:50px;border:1px red solid;overflow:hidden;text-overflow:ellipsis;white-space:pre;word-break:break-all;
</style>

<ul>
<li>1标题标题标题标题标题标题标题标题标题标题标题标题</li>
<li>2标题标题标题标题标题标题标题标题标题标题标题标题</li>
<li>3标题标题标题标题标题标题标题标题标题标题标题标题</li>
<li>4标题标题标题标题标题标题标题标题标题标题标题标题</li>
</ul>

可以过关了吗

本回答被提问者采纳

文字超出容器长度自动隐藏并且显示省略号

在做网站的过程中我们会遇到这样一种情况，在新闻列表中一行只显示一条新闻，但是新闻标题的长短是不一样的，如果新闻标题过长会自动换行，当然可以使用溢出隐藏属性，但是使用溢出隐藏又会显得比较突兀，现在给大家提供以下解决方法

<style>
     p { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>

只需要在原先写好的样式中加入上述代码即可