Получение ширины элементов выходит из цикла while

Question

Я пытаюсь разбить фрагмент текста на отдельные строки. В каждой строке должно быть как можно больше слов без увеличения ширины, превышающей ее размер.

Используя jQuery, я создал функцию, которая делает это, но у меня возникла проблема с этим.

Внутри цикла while я просматриваю кусок текста и беру 6 слов, чтобы поставить их в строку. Я хочу сравнить ширину этого текста с шириной этого контейнера. Но все, что я пытаюсь получить ширину этого элемента, выходит из моего цикла while.

Я пытался использовать метод jQuery, чтобы получить ширину:

$('element').width();

И необработанное свойство JS width:

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

Ни то, ни другое не работает, но я не уверен, почему? Кто-нибудь может помочь?

Вот ссылка на jsfiddle, закомментированная сломанная часть.

http://jsfiddle.net/CZH2p/

Заранее спасибо!

Answer 1

Я думаю, вам нужно пересмотреть, как объект работает в javascript, это также потенциально лучше подходит для функции, чем простой объект.

Все еще не уверен в цели того, что вы пытаетесь достичь здесь. Но это то, чем я могу вам помочь.

1. Вы ссылаетесь на свойства текущего объекта, не ссылаясь на объект, что означает, что у вас везде были неизвестные свойства.

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

Они создают новые вещи, а не устанавливают свойство, которое вы уже определили.

2. У вас пустая команда catch, что означает, что вы не получаете ошибок в консоли отладки. Наверное, поэтому у вас сложилось впечатление, что width() вытягивает вас из цикла. Это не так, это исключение быть пойманным и подавленным.

} catch(err) {}

3. $ lastLine и last_width никогда не устанавливаются в что-либо кроме "0", что означает, что ваш console.log всегда показывает 0. И ваш вызов $lastLine.text() является ошибкой.

4. Я предположил, для чего должна быть установлена ​​$ lastLine, и исправил основные проблемы, описанные выше. Это сейчас достижение того, что вы хотели? http://jsfiddle.net/rakkeh/CZH2p/2/

Answer 2

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>