円の枠に沿って文字が折り返すようにしたい

円の中に文字を入れたいのですが、円の外に文字が出てしまいます。
円の枠に沿って文字が自動的に折り返されるようにしたいのですが、HTMLとCSSだけで表現できるのでしょうか？

下記のようにコーディングすると、当然ですが、円から文字がはみ出ます。
それを参考画像のように綺麗に折り返されるしたいです。
HTMLとCSSだけでできれば良いですが、jQuery等で実現できる場合はそちらでも構いません。

html
1<div>
2<p>サンプルサンプルサンプルサンプルサンプル</p>
3</div>

CSS
1div {
2  width: 100px;
3  height: 100px;
4  background: blue;
5  color: #fff;
6  border-radius: 50%;
7}

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

したいことは、CSS Shapes Module Level 2 で定義されると思われる shape-inside で可能です。
……が、まだありません。残念。

仕方ないので、shape-outside で疑似的に代用してみます。

HTML
1<div class="container">
2 <div class="left"></div>
3 <div class="right"></div>
4 <p>サンプルサンプルサンプルサンプルサンプル</p>
5</div>

CSS
1.container {
2  width: 100px;
3  height: 100px;
4  border-radius: 50%;
5  overflow: hidden;
6  background: #9cc;
7  color: #fff;
8}
9
10.left {
11  float: left;
12  width: 30px;
13  height: 100px;
14  shape-outside: polygon(0% 0%, 0% 100%, 100% 100%, 10% 70%, 10% 30%, 100% 0%);
15}
16
17.right {
18  float: right;
19  width: 30px;
20  height: 100px;
21  shape-outside: polygon(0% 0%, 90% 30%, 90% 70%, 0% 100%, 100% 100%, 100% 0%);
22}
23
24p {
25  margin: 0;
26}

shape-outside
https://developer.mozilla.org/ja/docs/Web/CSS/shape-outside

CSS Shapes Module Level 1
https://triple-underscore.github.io/css-shapes-ja.html

Chromeで使えます。
https://caniuse.com/#search=shape-outside

投稿2017/12/15 15:14

x_x

総合スコア13749

brebre

2018/01/14 12:58

ご回答いただきありがとうございました！こちらで実現できましたので、ベストアンサーとさせていただきました！

行動規範の内容に同意します

他の回答者さんが回答している方法以外には、以下のコードのようにpaddingを調整して文字を円の中に収めるという方法もあります。しかし、これは円の枠に沿って文字が表示されるわけではないですから、もしどうしても円の枠に沿って文字を表示したいというのであれば、javascriptを使用するしかないかと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            box-sizing: border-box;
9        }
10
11        html {
12            font-size: calc(100vw / 48);
13        }
14
15        .box, .circle, .circle_content {
16            width: 100%;
17            height: 100%;
18        }
19
20        .box::before {
21            display: block;
22            padding-top: 100%;
23            content: '';
24        }
25
26        .box {
27            position: relative;
28            width: 30%;
29            max-width: 750px;
30        }
31
32        .circle {
33            font-size: .75rem;
34            position: absolute;
35            top: 0;
36            right: 0;
37            bottom: 0;
38            left: 0;
39            text-align: center;
40            color: #fff;
41            border-radius: 50%;
42            background-color: #84CCC9;
43        }
44
45        .circle_content {
46            margin: 0 auto;
47            padding: 15%;
48        }
49    </style>
50</head>
51<body>
52<div class="box">
53    <div class="circle">
54        <div class="circle_content">
55            <p>
56                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
57            </p>
58        </div>
59    </div>
60</div>
61</body>
62</html>