1

我正在将我的脚趾浸入 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;  
}

为什么报价从盒子里伸出来？

谢谢。

4

2 回答 2

2

更新：

  1. 您的文字太大是文字的一半。
  2. 你的宽度不够大。

如果不更改其中之一，您将无法实现您想要的，正如我之前解释过的，如果您添加这段代码并更改您的字体或宽度，您将能够实现它。

word-wrap: break-word;

这会导致文本留在 div 中 -在这里查看演示

于 2013-09-24T09:32:14.757 回答
0

Are you aware that writing this: font-family:tangerine-regular; You display this font only on computers that actually have it installed?

I would increase padding on the right.. word-wrap: break-word is good idea but not in this case..

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

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

于 2013-09-24T09:57:52.390 回答