Question

我正在将我的脚趾浸入font-face并使用font-squirrel为名为tangerine的草书字体创建必要的文件。

我想用它作为拉引号，所以在右边创建了一个小的浮动区域。我注意到字母的顶部超出了容器的边缘。这样写的是：

<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

<强>更新

你的文字太大，是文字的一半。
你的宽度不够大。

如果不改变其中一个，你将无法达到你想要的东西，正如我之前所解释的，如果你添加这段代码并更改你的字体或宽度，你将能够实现它

word-wrap: break-word;

这会导致文本留在div中 - Here to see the Demo

Answer 2

你知道写这个：font-family：tangerine-regular;您只在实际安装了它的计算机上显示此字体吗？

我会在右边增加填充...自动换行：break-word是个好主意，但不是在这种情况下..

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

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

字体伸出其容器

2 个答案: