如何设置CSS样式使网页中过长的新闻标题后面以省略号显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何设置CSS样式使网页中过长的新闻标题后面以省略号显示相关的知识，希望对你有一定的参考价值。
如题，当鼠标放在标题上时显示全部内容。
同志们，我是菜鸟，请尽量说明白些。比如把什么代码放入什么里面。。。。
前提是要固定宽度，如下
<li style="width:50px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">如何设置CSS样式使网页中过长的新闻标题后面以省略号显示</li>
而在样式中加上 overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 这段代码的意思是超出50px的长度后，后面以省略号显示。
省略号用CSS来实现...而鼠标放上显示全部内容用title来实现..
其实每一个元素都有一个title属性的..title不止是个标签而已.....
代码如下
<style>
div
width:100px;
overflow:hidden;
text-overflow:ellipsis;
word-break:keep-all;/*强行不换行....*/
</style>
</head>
<body>
<div><a href="" title="CSS显示省略号">css显示省略号</a><div>
</body>
注意..把链接放到div里面..设置div的省略号样式..否则无效...
还有一点值得注意的....在firefox里....text-overflow并不支持...加上去是没有效果的....
如果利用hover让一个div隐藏或者来显示..在IE6跟firefox里是根本就不支持的...除非有一种情况是支持的..就是要把span...写到<a>标签的内部....然后让hover滑过的时候span出现.......
但是在firefox里有点特殊的就是...本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏或者显示的...但是IE6里却不能..必须采用JS来实现...
所以...你觉得哪个好用就用哪个... 参考技术B
在CSS中，text-overflow:ellipsis;可以在文本隐藏时候在文本末尾加入省略号。所以如果html里是用li写的。
<style>litext-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block;word-break:keep-all;
</style>
<ul>
<li>本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏</li>
</ul>
这样子就可以，你可以把li改成你的元素。
参考技术C .....你在<body>.....</body>里面写两个div元素，然后第一个是需要尺寸的省略号，然后第二个是完整标题，然后默认把第二个div隐藏掉（怎么隐藏掉有很多方法爱用哪个用哪个），给它设置hover样式，最后在hover里面正常显示即可 ...... 参考技术D 写两个div元素，第一个是需要尺寸的省略号，第二个是完整标题，然后默认把第二个div隐藏掉（怎么隐藏掉有很多方法爱用哪个用哪个），给它设置hover样式，在hover里面正常显示即可如何防止外部 CSS 覆盖 Web 组件样式
【中文标题】如何防止外部 CSS 覆盖 Web 组件样式【英文标题】：How to prevent outside CSS from overriding web component styles 【发布时间】：2015-03-04 18:18:38 【问题描述】：我有一个自定义的 Polymer 元素，我想以某种方式对其进行样式设置，并作为插件提供给许多不同的网站。我希望能够以某种方式封装我的自定义组件的样式，使它们在嵌入它们的所有网站上看起来都一样。以下是来自父网页的字体指令如何干扰我的组件样式的示例：
<style>
*
font-size: 18px;
</style>
<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="polymer-css-test">
<template>
<style>
:host
font-size: 12px;
</style>
<div>
Please tell me how to make this 12pt.
</div>
</template>
<script>
Polymer('polymer-css-test',
ready: function ()
);
</script>
</polymer-element>
<polymer-css-test></polymer-css-test>提前感谢您的帮助。
【问题讨论】：
【参考方案1】：有两种方法可以实现这一点（您甚至可以同时使用）。
如果你想让你的样式规则在这里应用，你需要让它们比“全局”规则更具体：
:host *
font-size: 12px;
此外，您可以将!important 标记添加到规则中以使其覆盖其他规则，但应谨慎使用：
:host
font-size: 12px!important;
有关特异性（哪些规则适用于哪些元素）的更多信息，请查看this page。
【讨论】：
谢谢@timo-d。我有点困惑，因为 Shadow DOM 应该防止外部 CSS 干扰我的组件样式。看这篇文章：html5rocks.com/en/tutorials/webcomponents/shadowdom-201你熟悉web组件吗？ Shadow DOM 确实在 DOM 和 CSS 样式方面是它自己的空间，确实不能将 CSS 样式应用于 Shadow DOM 中的元素直接 不使用::shadow 或/deep/。但是，即使样式规则不适用于子元素本身，也有一些 CSS 属性（例如 font-size）可以从父元素继承。我认为这就是这里正在发生的事情。我承认这很奇怪，我找不到任何来源来证实我的理论
我认为你是对的。这是对您的理论的确认：groups.google.com/forum/#!topic/polymer-dev/06zYBZ_IMjc
CSS 继承跨越了阴影边界。 resetStyleInheritance 曾经有一个标志，但它已被删除。
嗯，这似乎是 Web 组件方法的真正缺陷。似乎应该有一种说法，这是 Web 组件样式，并且父样式仅应在它们指定特殊内容时应用，例如 !important-polymer-element 或其他东西以上是关于如何设置CSS样式使网页中过长的新闻标题后面以省略号显示的主要内容，如果未能解决你的问题，请参考以下文章