使文本大于包含框-css

我试图让一个文本看起来好像对于它所在的包含框来说太大了

这是一个有点难以描述，所以这里是一张我拍的照片

我想尝试为他们制作图像，但如果css不可行，我可以

我使用JSFIDLE设置了一个场景，即使没有涉及任何js。这是一个有用的工具：]

我试着在

标签将被放置在

下的地方做一些奇特的定位，但那不起作用，因为我这样做时H4会崩溃

有什么想法吗？

给你：

HTML:

<h4>Hello</h4>

h4 {
    background-color:#00a2e8;
    font-family:Arial,sans-serif;
    font-size:5em;
    line-height:0.6em;
    padding:0 0 2px 0;
    font-weight:bold;
    overflow:hidden;
    color:#99d9ea
}

像这样的？

---

这里有一种替代方法，使用container div剪裁子标题元素：

HTML:

---

这应该在浏览器之间正常工作；我加入了“display:block”，这样它也可以与

一起工作。

我想你也需要剪裁底部。@Phrogz:我想我的演示已经像示例图像一样了。如果没有（对你来说），你在使用什么浏览器/等等？我猜这是因为Arial和Helvetica略有不同。只要稍微修改一下数字，就有可能使它在两种字体上看起来都很合适。@phrogz我知道图片中发生了什么，但我无法在osx上进行浏览器测试。相应地调整线条高度可能有助于效果删除2px填充在OSX上有一点帮助。线条高度的任何更改都不会影响相对于方框底部的基线。最简单的修复方法是先包装

…

，然后包装

h4 span{position:relative；top:0.2em}

。我现在明白了，谢谢，所以真正重要的属性只有行高和溢出：hiddenya这是我最初想要做的，我想我可能必须测试这两个版本。我确实想要一个能跨更多浏览器工作的解决方案。你甚至可以使用一些Jquery将某个类的所有h4与它们对应的div.clip放在一起。。。

<div class="clip"><h4>Sidebar</h4></div>

h4 { 
position : relative; 
top : -30px; 
background-color : #345678; 
color : white; 
font-size : 4.5em; 
overflow : hidden; }

.clip { 
display : block; 
height : 30px; 
overflow : hidden; 
}