字體伸出它的容器

我正在將我的腳趾浸入字體面並使用字體松鼠爲稱爲橘子的草書字體創建必要的文件。字體伸出它的容器

我想將它用於拉引號，因此在右側創建了一個小浮動區域。我注意到字母的頂部超出了容器的邊緣。該文本是這樣寫的：

<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; 
}

爲什麼報價伸出它的盒子？

謝謝。

來源

2013-09-24 maxelcat

更新：

您的文字是太大了一半-ING的文本。
你的寬度不夠大。

沒有改變其中之一，你將無法實現你想要的東西，正如我之前解釋過的，如果你添加這段代碼並改變你的字體或寬度，你將會能夠實現它。

word-wrap: break-word;

這會使文本留到格 - Here to see the Demo

來源

2013-09-24 09:32:14 Shaun

感謝 - 但它減少的話一半。 ..所以不能這樣做。 – maxelcat

這是因爲1）你的字體太大2）你的寬度不夠大。除非你改變了兩者，否則它將不起作用。 – Shaun

你知道寫這：FONT-FAMILY：橘子正規;只在實際安裝它的計算機上顯示該字體？

我會增加填充右側..自動換行：打破字是好主意，但不是在這種情況下..

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

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

來源

2013-09-24 09:57:52 Mag

它應該適用於每個人。我以前給過這個答案，而且沒有問題。 – Shaun

您是否嘗試過使用此確切字體的解決方案？因爲我沒有.. – Mag

謝謝 - 在CSS我有鏈接到柑橘文件，所以我認爲它應該嵌入字體好嗎？我原以爲瀏覽器會計算出字母/詞的放置位置，以便它適合在容器內=就像其它字體一樣......不明白爲什麼它不在這裏工作 – maxelcat

字體伸出它的容器

回答

相關問題