SVG：テキスト内のテキスト（またはCSSを使用）

Question

テキスト内にテキストを配置する方法を探しています（画像例を参照）。

基本的には内部のテキストと例の文字 'T' に見るように。最も簡単な方法は、長方形にテキストマスクを実装することです。私の場合は、内部のテキストがフレーズの配列であり、それらをすべて見る必要があるため、これは機能しません。

私はあらゆる種類のソリューションに対応しています。今のところ私はSVG + snapsvgライブラリでそれをしようとしています。 CSSソリューションも開かれています。

UPDATE：

（私の場合、折り返しのあるテキストを単語や文章になります）

Answer 1

あなたはtext-align:justifyを使用することができますし、このようなものになります。

div { 
 
    text-align: justify; 
 
    border:1px dashed red; 
 
    margin:auto 
 
} 
 
.w600 { 
 
    width: 600px; 
 

 
} 
 
.w200 { 
 
    width: 200px; 
 
}

<div class="w600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat turpis ut lectus semper sollicitudin. Nullam turpis metus, eleifend ut mattis nec, vehicula a justo. In ac rhoncus urna. Praesent sodales et felis non pretium. Vestibulum eros augue, 
 
    venenatis in cursus at, tincidunt ac sapien. Nullam quis purus luctus ex ullamcorper fringilla vel a odio. Phasellus ligula enim, placerat id tortor nec, maximus maximus tortor. Maecenas accumsan placerat elementum. Maecenas accumsan</div> 
 
<div class="w200">Phasellus vel velit vel mauris facilisis sagittis id eget elit. Nulla sit amet ornare arcu, sed aliquam sem. Sed molestie tempor nibh et pretium. Cras non dui gravida, tincidunt arcu condimentum, dictum dui. Proin iaculis diam lacus, at consequat erat 
 
    lobortis ornare. Donec in ante sed nibh tempus commodo. Vivamus id justo vitae lacus varius imperdiet. Proin porttitor velit enim, ut molestie sem fermentum ut. Integer vitae est non diam dictum sodales. Mauris lobortis lectus a ligula fringilla, semper 
 
    ullamcorper lacus condimentum. Fusce nisl lectus, pharetra sed augue pulvinar, volutpat mollis justo. Phasellus a iaculis turpis, ut placerat magna. Integer et mollis metus, a lacinia arcu. Sed at erat eget lacus dapibus malesuada id eu tortor. Nullam 
 
    et ullamcorper ante, eu venenatis eros. Pellentesque tempor quis risus dignissim vulputate. Nulla facilisi. Aliquam dapibus pharetra risus in consectetur. Sed pretium mollis imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
 
    per inceptos himenaeos. Fusce eu felis diam. Donec sit amet quam eget lorem posuere porta. Integer porttitor condimentum neque ut volutpat. Nam iaculis feugiat libero et convallis. Nullam sed orci ac ante pellentesque pretium. Donec tincidunt massa 
 
    quis est fringilla, nec porttitor purus varius. Duis id consectetur nunc. Curabitur interdum feugiat lorem a sollicitudin. Duis tempus orci scelerisque elit facilisis tempus. Nulla nec maximus eros.</div>

Answer 2

これを実行する最も正しい方法純粋なCSSだけを使用することは、ポリゴンを持つshape-insideプロパティを使用するか、値として透過PNGマスクへのURLを使用することです。しかし、現在のところ、shape-outsideがよりサポートされているようで、あなたの特定のニーズには役立ちません（おそらくその方法では負のスペース文字を使用できます）。これは、shape-outsideが、少なくとも2014年のクロムプロジェクト（https://bugs.chromium.org/p/chromium/issues/detail?id=356778）ではshape-in​​side-wellよりも全体的なHTMLレイアウトが邪魔になっているためです。 caniuse.comのチェックアウトでは、一部のサポート（主にChrome、Safari、Operaなど - いくつかのプレフィックスが必要：http://caniuse.com/#search=shape-inside）が表示されていましたが、ChromeとChromiumの両方のインストール、現在のバージョンWindowsではデモを作るのが難しいので、2014年にはその時間枠からデモがたくさんあるので、これはうまくいっているようだ。

理論上、shape-insideプロパティの値は polygon(40.42% 28.25%,42.33% 99.37%,62.17% 99.37%,61.83% 27.50%,99.10% 26.72%,99.63% 0.69%,99.40% 0.41%,61.92% 0.88%,40.83% 1.13%,1.04% 1.47%,1.25% 28.32%); /*a t-shape letter mask-- defined in percentage values*/で、ブロックレベルの要素セレクタに適用できます。固定されたユニットで作業することを好む場合は、上記のt字形は代わりにpolygon(161.67px 113.00px,169.33px 397.47px,248.67px 397.47px,247.33px 110.00px,396.42px 106.88px,398.50px 2.76px,397.58px 1.65px,247.67px 3.53px,163.33px 4.53px,4.17px 5.90px,5.00px 113.26px)

などの多角形を描画するツールを使用しない限り、さまざまな文字の形が非常に退屈です。http://betravis.github.io/shape-tools/polygon-drawing/ AやBなどの文字の負のスペースのような文字は、別のshape-insideまたはshape-outsideを縦に並べて使用する必要があります。あなたが怠け者になりたければ、手紙の中の空白を無視することができ、おそらくまだ読むことができます。句読点なしで大文字と小文字をサポートするには、最低52（26 * 2）クラスが必要です。私は後で私の時間の制約に応じて、文字のためのすべての多角形の形状がこの答えを更新することがあります。