使文本大于包含box - css

Question

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

这有点难以描述，所以这是我拍的照片。

我想尝试为他们制作图像，但如果用css不可能的话我可以。

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

http://jsfiddle.net/Lv2EE/

我尝试做一些奇特的定位，其中<span>标记位于<h4>下面但由于H4在我这样做时崩溃而无效。

任何想法？

Answer 1

你走了：

Live Demo

<强> HTML：

<h4>Hello</h4>

<强> CSS：

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
}

Answer 2

这样的东西？ http://jsfiddle.net/7hmfJ/10/

Answer 3

这是另一种选择，使用容器div来剪切子标题元素：http://jsfiddle.net/Lv2EE/3/

HTML：

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

CSS：

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

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

这应该适用于各种浏览器;我添加了'display：block'，因此它也适用于<span>。