css3で円を表現しましたが

中のテキストの文字がはみ出てしまいます。
※上や下の横幅が短くなるため

良い対応方法はありませんか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/17 03:36:42
  • 終了:2013/08/24 03:40:03

回答(3件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492013/08/17 06:38:06

ポイント34pt

HTMLソースが示されていないので、
http://q.hatena.ne.jp/1375960016#a1210471 のcx20さんのご回答に追加する形にしますね。

一番簡単な方法は文字を小さくしてしまう方法。

.moon {
    position: relative;
    overflow: hidden;
    left: 0px;
    top: 0px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    font-size:50%;  ←これを追加
}

※50%という数値は目立つように大げさにしてあります。
 お好きなサイズに調整してください。
※%以外にもサイズ指定する方法はありますので、他は下記参照。
http://www.htmq.com/style/font-size.shtml


環境依存性が高くなってしまいますので詳細は割愛しますが、
フォント指定とフォント形状指定を組み合わせて微調整する方法もあります。
http://www.htmq.com/css3/font-stretch.shtml
http://www.htmq.com/style/font-family.shtml

id:dawakaki No.2

だわかき回答回数797ベストアンサー獲得回数1222013/08/19 22:33:58

ポイント33pt

テキストを自由な位置で折り返せる「CSS Text Wrapper」
http://phpspot.org/blog/archives/2007/12/css_text_wrappe.html
http://phpspot.net/php/webimager/admin2/data/0db643a599e3edafe42add8b29eabc95.png

id:boost_beast No.3

boost_beast回答回数785ベストアンサー獲得回数312013/08/24 00:07:17

ポイント33pt

http://www.tagindex.com/stylesheet/img/vertical_align.html
テキストの位置を変えるにはどうでしょうか

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません