获取元素宽度打破了while循环

Question

我正在尝试将一大段文本分成单独的行。每行需要包含尽可能多的单词，而不是增长到大于其容器的宽度。

我使用 jQuery 创建了一个函数，但我遇到了问题。

在一个 while 循环中，我浏览了我的一段文本，然后抓住了 6 个单词放在一行上。我想将该文本的宽度与该容器的宽度进行比较。但是我尝试获取的所有元素的宽度都超出了我的 while 循环。

我尝试过使用 jQuery 的方法来获取宽度：

$('element').width();

还有原始的 JS 宽度属性：

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

似乎都不起作用，但我不知道为什么？有人可以帮忙吗？

这是一个 jsfiddle 的链接，损坏的部分已被注释掉。

http://jsfiddle.net/CZH2p/

提前致谢！

Answer 1

我认为您需要重新审视对象在 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/

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>