作物阴影多行文本

有被遮挡时多行文本，但它的高度应该被裁剪，只显示3行是：作物阴影多行文本

<h1><p>Lorem ipsum dolor sit amet consectetuer</p></h1> 
<style> 
h1 { 
    width: 100px; 
    line-height: 1em; 
    max-height: 4em; 
    overflow: hidden; 
} 

h1 p { 
    text-shadow: 0 0 20px #000; 
} 
</style>

如可以看出here，文字阴影被裁剪过，并且期望的结果将是裁剪文本而不是它的影子。

实数文本已被截断，但如果它将被截断以覆盖最坏情况的场景（'MMMMMMMMMMMMMMMMM ...'），它将被截断得太多。

这可以用CSS来解决吗？这里有什么选择？

来源

2017-09-01 estus

上h1左填充会解决此问题

h1 { 
 
    width: 100px; 
 
    line-height: 1em; 
 
    font-size: 200%; 
 
    max-height: 4em; 
 
    overflow: hidden; 
 
    padding-left: 10px; 
 
} 
 

 
h1 p { 
 
    text-shadow: 0 0 20px #000; 
 
}

<h1><p>Lorem ipsum dolor sit amet consectetuer</p></h1>

如果一个需要匹配该元素与以前和以后的内容垂直对齐，添加阴性切缘，以补偿填充

h1 { 
 
    width: 100px; 
 
    line-height: 1em; 
 
    font-size: 200%; 
 
    max-height: 4em; 
 
    overflow: hidden; 
 
    padding-left: 10px; 
 
    margin-left: -10px; 
 
} 
 

 
h1 p { 
 
    text-shadow: 0 0 20px #000; 
 
}

<h1><p>Lorem ipsum dolor sit amet consectetuer</p></h1>

来源

2017-09-01 18:49:31 LGSon

所以我想，为了保持文本在同一个地方，我们应该推迟负边距加正面填充？ – estus

@estus如果您需要将此元素的垂直对齐与之前和之后的内容匹配，那么是的。用这个信息更新我的答案。 – LGSon

这将起作用。非常感谢。 – estus

作物阴影多行文本

回答

相关问题