CSS - 角度に沿ってテキストを折り返す

Question

角度に沿って折り返すテキストを取得しようとしています。これは私が、私はそれを記述することができますより良いが何をしようとしている示しています

http://bdub.ca/angle.png http://bdub.ca/angle.png

私は解決策hereが見つかりましたが、それは効果を作成するために、空のFLOATEDのdivの多くの一体を使用しています。私はこれをページ上で何度も行う必要があるので、より軽量なソリューションを持つ方が良いでしょう。余分な要素のオーバーロードからDOMを守るために、ページロード時に実行できるだけのJavaScriptがあれば大丈夫です。

JSソリューションのブレーンストーミングは、スパンの各行を折り返し、スパンの左余白を連続的に大きくする方法を見つけようとしています。警告は、テキストがコンテナに収まるように自動的に折り返す段落であることです。残念ながら、Wordpressの改行を挿入するようにクライアントに依頼することはできません。したがって、自動的に折り返しを検出するJavaScriptを使用して。

提案がありますか？

Answer 1

正当には（w3c規格、モニター画面の解像度とプライバシーを監視）では実際の文字幅を検出できないという点で非常に難しいです。フォントサイズを特定の幅に設定し、幅に近づくと改行を挿入することができます。 （b4モニターで）

だからcss：.paraIncrement {font-size：12pt; }

私はJavaScriptで少しさびたんだので、この1はのはpsudoコードを聞かせて：

outputstr[] = array(); 
int index = 0; 
int startmax = 80; 
int innerCount = 0; 
for (int i = 0; paragraph.length; i++) { 
    outputstr[index] += paragraph[i]; 
    innercount++; 
    if (innercount == startmax) { 
     startmax -= 5; // how much you want the indent to shrink progressively. 
     innercount = 0; 
     index++; 
    } 
} 
for (int i = 0; i < output.length(); i++) { 
    echo '<span style="margin-left: '+(indentValue*i)+';">'+output[i]+'</span>'; 
} 

このセクションでは、スタートの最大長は5ずつデクリメント、長さが80文字であることを期待しています。また、早期に破損しないことを確認したい場合は、css.overflowがhidden/visibleに設定されていることを確認してください。

Answer 2

段落の左側にインラインにしたい空白の画像（段差のようなギザギザの部分）がある場合は、それを行う必要があります。