сделать текст больше, чем вмещающий блок - css

Question

Я пытаюсь сделать так, чтобы текст выглядел так, как будто он слишком большой для вмещающего ящика, в котором он находится.

Это немного сложно описать, поэтому вот изображение, которое я сделал.

Я хочу попытаться сделать изображения для них, но я мог бы, если это невозможно с помощью css.

У меня есть сценарий настройки с помощью jsfiddle, хотя там нет никаких js.Это полезный инструмент:]

http://jsfiddle.net/Lv2EE/

Я попытался сделать какое-то необычное позиционирование, где тег <span> будет расположен под <h4>, но это не сработало, потому что H4 рухнулкогда я это сделал.

есть идеи?

Answer 1

Вот, пожалуйста,

Демонстрационная версия

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>.