テキストが折り返される場所を検出することは可能ですか?
Lorem ipsum dolor sit amet
上記のテキストは、「dlor」という単語の後に折り返されているとしましょう。それを検出し、そこにそのマークを挿入する方法はLorem ipsum dolor<div class='wrap-mark'/> sit amet、たとえば次のようになりますか?
質問する
481 次
2 に答える
6
この問題がいくつかの異なる方法で解決されるのを見てきました。私のお気に入りの 1 つは、テキストを保持するコンテナーの幅を反映する div を作成することです。次に、コンテンツの単語を 1 つずつ偽のコンテナーに印刷し、途中でコンテナーの高さを測定します。コンテナの高さが変わると、改行/折り返しがあることがわかります。
Facebook や他のいくつかの CMS は、このような方法を使用して、ユーザーの入力内容に合わせてテキストエリアを拡張します。これらのテクニックを研究することで、テキストを測定するためのさらにいくつかの創造的な方法を収集できると確信しています。
于 2013-07-05T19:49:06.537 に答える
-1
ソフト ハイフン エンティティを使用して折り返し位置をマークし、改行なしエンティティを使用して空白なしで単語を区切ります。改行なしのスペースは、IE10 のソフト ハイフンの前に置く必要があります。次に例を示します。
クロスブラウザのソリューションは次のとおりです。
<!doctype html>
<html>
<head>
<title>Soft Hyphen Text Wrapping</title>
<style>
/* Generate space after each soft hyphen */
.fake-space:after { content: "\00a0"; }
@media all and (-ms-high-contrast: none) {
/* Generate space before each soft hyphen for IE10 */
.fake-space:before { content: "\00a0"; }
.fake-space:after { content: ""; }
}
</style>
</head>
<body>
<!--Paragraph with words separated by soft hypen entity wrapped in a span-->
<p>Lorem<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet<span class="fake-space">­</span>ipsum<span class="fake-space">­</span>dolor<span class="fake-space">­</span>sit<span class="fake-space">­</span>amet</p>
</body>
</html>
参考文献
于 2013-07-04T01:41:16.883 に答える