Шрифт, торчащий из его контейнера

Question

Я окунаю палец в лицо шрифтом и использовал шрифт-белку для создания необходимых файлов для скоростного шрифта под названием «мандарин».

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

<p><span class="quote">I would recommend the sessions to all mums.</span>Mel very quickly gauged the kind of person ...</p> 

Вот CSS:

.quote { 
width:250px; 
float:right; 
margin:0 0 20px 20px; 
padding:5px 5px 5px 15px; 
border-left:4px solid #F61942; 
border-left:4px solid #FBC7D0; 
background:#b7e6fa; 
font-family:tangerine-regular; 
font-size:54px; 
color:#A675CD; 
line-height:1; 
} 

Почему котировка торчащие из коробки?

Спасибо.

Answer 1

Update:

1. Ваш текст слишком велик наполовину инга текст.
2. Ваша ширина не больше.

Без изменения одного из них вы не сможете достичь того, что вы пытаетесь, как я уже объяснял ранее, если вы добавите этот фрагмент кода и измените свой шрифт или ширину, способный его достичь.

word-wrap: break-word; 

Это приводит текст, чтобы остаться в DIV - Here to see the Demo

Answer 2

Вы знаете, что писать это: семейство шрифтов: мандарин-регулярный; Вы показываете этот шрифт только на компьютерах, на которых он установлен?

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

.quote { 
width:235px; 
padding:5px 20px 5px 15px; 
} 

http://jsfiddle.net/swqzq/1/