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

これを書いていることに気づいていますか: font-family:tangerine-regular; このフォントは、実際にインストールされているコンピューターにのみ表示されますか?

右側のパディングを増やします.. word-wrap: break-word は良い考えですが、この場合はそうではありません..

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

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

于 2013-09-24T09:57:52.390 に答える