5

テキストを角度に沿って折り返そうとしています。これは、私が説明できるよりもうまくやろうとしていることを示しています。

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

ここで解決策を見つけましたが、効果を作成するために空のフローティング div を大量に使用しています。ページでこれを何度も行う必要があるため、より軽量なソリューションを用意することをお勧めします。JavaScript は、余分な要素のオーバーロードから DOM を保護するためにページの読み込み時に実行できるものであれば問題ありません。

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

助言がありますか？

4

2 に答える 2

2

文字の実際の幅を正当に(w3c 標準、モニターの画面解像度サイズとプライバシー) 検出できないという点で、非常に注意が必要です。font-size を特定の幅に設定し、幅に近づいたら自分で改行を挿入できます。（b4モニター時）

そう css: .paraIncrement { font-size: 12pt; }

私はJavaScriptに少し慣れていないので、これを疑似コードにしましょう：

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>';
}

このセクションでは、先頭の最大長は 80 文字で、毎回 5 ずつ減少すると予想されます。また、早期に壊れないようにしたい場合は、css.overflow が hidden/visible に設定されていることを確認してください。

于 2013-01-31T01:59:13.993 に答える
0

段落の左側にインラインにしたい空白の画像（ステップのようにぎざぎざ）を持つことでそれができるはずです。

于 2013-01-31T01:42:21.487 に答える