24

テキストの段落を円の中に配置する方法について、まともで迅速な解決策を探していました。2つの解決策があることがわかりました。

解決策 1

テキストと同じ高さの複数のdivをテキストの左右に配置し、div のを変更することで、テキスト用に残されたスペースを調整します。

解決策 2

http://www.csstextwrap.com/index.phpという同じものにジェネレーターを使用します。

ボーナス(問題の一部ではなく、単なるヒント)

私はこれを探しているわけではありませんが、おそらく誰かがそれを必要とするかもしれません.リンクとしてそれを持っているといいと思います. .

質問?

フローティング div や追加のマークアップを追加することなく、円の中にテキストの段落を配置するためのより簡単な解決策はありますか。そのテキストを含む画像を平手打ちすることは解決策ではありません。最良のシナリオは、CSS に微調整を加えずにクリーンな HTML マークアップを作成するソリューションです。

4

5 に答える 5

23

Eric Meyer の著書「Eric Meyer on CSS」(Project 10) では、これについて説明しており、あなたが見つけたテキスト ラップ ソリューションは同じ原則を使用しています。

シンプルを使用してborder-radius: 50%も、現時点では長方形のコンテンツ ボックスの形状には影響しません。たとえば、Kyle Sevenoaks によるデモを参照してください。

この問題に対処する開発中の CSS3 モジュールがあります。

http://dev.w3.org/csswg/css-shapes

ただし、この仕様はまだドラフト モードであり、現在サポートされていません。おそらく 1 年か 2 年後です。

短い答えはノーですが、うまくいけば、コメントが何らかの洞察を提供します.

于 2013-06-07T11:25:22.843 に答える
0

私が見つけた最も適切な答えはここにあります:

この方法を使用して、オーバーフローを非表示にするか、オーバーフローするのではなく、収まるテキストを使用する方が簡単です。

div から形状 (三角形) を切り取り、背後に背景を表示する

于 2014-12-17T15:00:20.847 に答える