36

テキストを内部に保持するために、ラウンド div が必要です。画像にあるように テキストをインラインで丸めた div

CSSを使用してこれを行うにはどうすればよいですか? 私のラウンド div には、四角形のようなテキストが表示されるためです。 http://jsfiddle.net/kUJq8/

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}
4

6 に答える 6

5

これを達成する方法の例を作成しました。まだ簡単な方法はありませんが、Spudley 氏が述べたように、近い将来実現する予定です。 http://jsfiddle.net/kUJq8/5/

この例は、 http://www.csstextwrap.comで使用されているのと同じ概念に基づいていますが、何が起こっているのか、この効果を達成する方法を説明するためにこの例を作成しました。

基本的に、最初に円といくつかのサンプル テキストを作成してから、一連の「架空の」フローティング div を作成して、テキスト ガイドラインを超えないようにし、自動的に次の行に折り返す必要があります。目的の効果が得られるように、div の幅を自由に変更してみてください。また、枠線を外すと、実際に文字がどのように見えるかがわかります。境界線は、div の幅を設定するときに役立ちます。

<div style="float:left;clear:left;height:15px;width:130px"></div>
<div style="float:right;clear:right;height:15px;width:130px"></div>

私の例では、円全体を作成しませんでしたが、正しい軌道に乗るには十分なはずです。このアイデアについてさらにサポートが必要な場合はお知らせください。ありがとう。

于 2013-11-11T15:44:49.313 に答える
4

「CSS シェイプ」と呼ばれる現在標準化されている CSS 機能があります。

(注: 「CSS Shapes」は CSS 機能仕様の名前です。CSS で長方形以外の形状を単純に作成する行為と混同しないでください。これは既に行っています) 。

CSS Shapes 機能は、あなたが求めていることを正確に実行します。つまり、要素の内側 (および/または外側) のテキストをどのように折り返すかに関して、要素の形状を指定できます。

詳細については、Web 上のさまざまな記事を参照してください。以下は、あなたが読みたいと思うかもしれないいくつかです：

また、W3C 仕様ドキュメントをここで読むこともできます: http://dev.w3.org/csswg/css-shapes/

ただし（これは大きな「しかし」です）、この機能はまだブラウザで広く利用できません。これはまだ仕様策定プロセスの途中であり、ブラウザのサポートは非​​常に限られています。

その間、あなたが求めていることは、実際には達成するのが非常に困難です。テキストを強制的に流したい領域の周りにたくさんのスペーサー要素を貼り付けなければならない場合があります。理想的ではありませんが、この新しい仕様がブラウザーで広くサポートされるようになるまでは、おそらく十分に満足できるものです。

于 2013-11-11T15:10:01.720 に答える
2

このソリューションがどれほど堅牢かはわかりませんが、実装は簡単で、円で囲まれたテキストの実証済みの例があります。チェック: CSS テキストの折り返し

于 2013-11-11T15:14:08.427 に答える