我的网页上有一个“div”,它具有固定的宽度和高度。CSS多行省略号跨浏览器
以下CSS只适用于单行文本:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
我怎样才能在多行文本适用省略号上的文本内该div使用纯CSS跨浏览器兼容?
我的网页上有一个“div”,它具有固定的宽度和高度。CSS多行省略号跨浏览器
以下CSS只适用于单行文本:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
我怎样才能在多行文本适用省略号上的文本内该div使用纯CSS跨浏览器兼容?
你可以在伪类之后使用一些解决它。由于text-overflow: ellipsis
不呈现相同的跨浏览器,我们正在使用您可以提供给:after
类的内容属性添加省略号。当我们设置white-space: nowrap
到p
我们需要添加div:after
“黑客”,以确保文本进行裁剪其中填充集
HTML:
<div>
<p>This is a text that clips to ellipsis because it is long</p>
<p>This is a text that clips to ellipsis because it is long</p>
</div>
CSS
div {
width: 200px;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
//Solves the overflow issue of the white-space: nowrap
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: #fff;
z-index: 1;
}
p {
white-space: nowrap;
display: inline-block;
}
p:after {
content: '...';
position: absolute;
right: 5px;
z-index: 2;
}
编辑
我可以看到,我可能会误解你的问题有点。我的代码将修复跨浏览器省略号渲染,但不适用于多行文本。看看这个职位更多的答案在你的特定主题:Limit text length to n lines using CSS: Stack Overflow
试试这个例子:
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
http://codepen.io/martinwolf/pen/qlFdp
或去dotdotdot.js
坏CSS不支持跨浏览器的多行夹持,只有WebKit似乎在推动它。任何其他的黑客解决方案目前看起来并不值得,因为即使他们有自己的问题。
我知道你想要纯粹的CSS,可能有你自己的Javascript替代选项,但你可以尝试使用一个简单的Javascript省略号库,如github上的Ellipsity,源代码非常干净和小,所以如果你需要做任何其他更改应该很容易。
https://github.com/Xela101/Ellipsity
我真的想要一个纯CSS解决方案,这也加快速度,让一切看起来更漂亮,而不需要外部的依赖。
这个解决方法将需要一个包装元素,并且如果它正好满足您的内容框,它会覆盖文本的最后一个小小的警告,但它在流畅的情况下运行良好,直到获得更好的CSS属性(如线夹)得到广泛实施。
最适合text-align:justified
,但没有必要。
https://codepen.io/freer4/pen/prKLPy
html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;}
.ellipsis{
overflow:hidden;
margin-bottom:1em;
position:relative;
}
.ellipsis:before {
content: "\02026";
position: absolute;
bottom: 0;
right:0;
width: 3em;
height:22px;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
z-index:2;
}
.ellipsis::after{
content:"";
position:relative;
display:block;
float:right;
background:#FFF;
width:3em;
height:22px;
margin-top:-22px;
z-index:3;
}
/*For testing*/
.ellipsis{
max-width:500px;
text-align:justified;
}
.ellipsis-3{
max-height:66px;
}
.ellipsis-5{
max-height:110px;
}
<div class="ellipsis ellipsis-3">
<p>Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>
</div>
<div class="ellipsis ellipsis-3">
<p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p>
</div>
<div class="ellipsis ellipsis-5">
<p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p>
</div>
var explorer = detectIE();
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}
var firefox = navigator.userAgent.indexOf('Firefox') > -1;
if ((explorer) || (firefox)) {
var fontSize = $(.ellipsis - 2).css('font-size');
var fontSize = parseInt(fontSize, 10);
var lineHeight = fontSize + 4;
var height = lineHeight * 2;
$(.ellipsis - 2).css("line-height", lineHeight + "px");
$(.ellipsis - 2).css("height", height);
$(.ellipsis - 2).css({
"overflow": "hidden",
"position": "relative",
"word-break": "break-all"
});
var divheight = $(.ellipsis - 2).height();
var lineheight = $(.ellipsis - 2).css('line-height').replace("px", "");
var countline = Math.round(divheight/parseInt(lineheight));
// if you want to show 2 line
if (countline > 2) {
$(.ellipsis - 2).addClass("dotted");
};
}
.ellipsis-2 {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
position: relative;
}
.dotted:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis-2">Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>
欢迎StackOverflow上。你测试了你提供的代码吗?它会导致错误('$(。ellipsis - 2)'位有问题,可能是你需要引号)。请注明您的代码,因为它很大,并且不清楚这项任务是否必要。最好的祝福 – YakovL