0

テキストのチャンクを個々の行に分割しようとしています。各行には、コンテナーよりも幅が大きくなることなく、できるだけ多くの単語が含まれている必要があります。

jQueryを使用して、そうする関数を作成しましたが、問題があります。

while ループの中で、テキストのチャンクを調べて、6 つの単語を取得して 1 行に並べます。そのテキストの幅とそのコンテナの幅を比較したい。しかし、私が試してその要素の幅を取得しようとすると、whileループから抜け出します。

jQuery のメソッドを使用して width を取得しようとしました:

$('element').width();

そして生の JS width プロパティ:

$('element').get(0).offsetWidth;

どちらも機能していないようですが、理由はわかりませんか? 誰でも助けることができますか？

これは壊れた部分がコメントアウトされているjsfiddleへのリンクです。

http://jsfiddle.net/CZH2p/

前もって感謝します！

4

2 に答える 2

0

オブジェクトが JavaScript でどのように機能するかを再検討する必要があると思います。これは、単純なオブジェクトよりも関数に適している可能性もあります。

ここで達成しようとしていることの目的はまだわかりません。しかし、これは私があなたを助けることができるものです。

1. オブジェクトを参照せずに現在のオブジェクトのプロパティを参照しています。つまり、不明なプロパティがいたるところにありました。

$parent = $featured_el.closest('.img-wrap');
parent_width = $parent.width();

これらは、すでに定義したプロパティを設定するのではなく、新しいものを作成します。

2. 空の try catch があります。これは、デバッグ コンソールにエラーが表示されないことを意味します。これが、 width() がループから抜け出しているという印象を受けているように見える理由だと思います。そうではなく、キャッチされて抑制されるのは例外です。

} catch(err) {}

3. $lastLine と last_width が「0」以外に設定されることはありません。つまり、console.log には常に 0 が表示されます。また、$lastLine.text() の呼び出しはエラーになります。

4. $lastLine の設定を推測し、上記の基本的な問題を修正しました。これは今、あなたが望んでいたことを達成していますか？http://jsfiddle.net/rakkeh/CZH2p/2/

于 2013-02-17T01:41:10.213 に答える
0

問題に対する CSS ソリューション:

バージョン 2

#a{
width: 400px;
height: 120px;
font-family: sans-serif;
text-transform: uppercase;
color:#fff;
background: #222;
padding: 200px 5px 0 5px;
}
#a>span{
display: block;
float:left;
font-size: 20px;
background: rgba(255,111,111,0.7);
padding: 10px;
margin: 5px 0;
}

各単語を span タグで囲む

<div id="a">
    <span>word</span>
    <span>word</span>
    <span>word</span>
    <span>word</span>
    <span>word</span>
    <span>word</span>
    <span>word</span>
</div>

少しのJSで実行できます

アイデアを提供するための最も単純なコード：

'<span>'+text.split(' ').join('</span><span>')+'</span>'

バージョン 1

改行にパディングがありませんが、希望に近いものになっています。

#a{
width: 400px;
height: 400px;
background: #222;
}

#a>h1 {
font-family: sans-serif;
display: inline;
font-size: 20px;
line-height: 50px; /*this does the trick*/
text-transform: uppercase;
color:#fff;
background: rgba(255,111,111,0.7);
padding: 10px;
}

そしてhtml：

<div id="a">
    <h1>Lol'em ipsum doll or e-man and again lol'em ipsum doll or e-man</h1>
</div>
于 2013-02-16T23:34:43.200 に答える