Question

我正试图将一大块文本分解成单独的行。每行需要尽可能多的单词，并且增长到宽度大于它的容器。

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

在一个while循环中，我浏览了一大堆文本，然后我抓了6个单词就行了。我想比较该文本的宽度与该容器的宽度。但是我尝试的所有东西都得到了那个元素的宽度，它突破了我的while循环。

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

$('element').width();

原始JS宽度属性：

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

似乎都没有用，但我不确定为什么？有人可以帮忙吗？

这是一个jsfiddle的链接，破碎的部分被注释掉了。

http://jsfiddle.net/CZH2p/

提前致谢！

Answer 1

问题的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>

Answer 2

我认为您需要重新审视对象在javascript中的工作方式，这也可能更适合函数而不是普通对象。

仍然不确定你想要在这里实现的目的。但这是我可以帮助你的。

1。您正在引用当前对象的属性而不引用该对象，这意味着您在任何地方都有未知属性。

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

这些创建新事物，而不是设置已定义的属性。

2。你有一个空的try catch，这意味着你的调试控制台没有错误。我想这就是为什么你似乎在宽限（）将你拉出循环的印象。不是，这是被捕获和压制的例外。

} catch(err) {}

3。 $ lastLine和last_width永远不会设置为“0”以外的任何值，这意味着您的console.log始终显示0.并且您对$ lastLine.text（）的调用是错误的。

4。我猜测了$ lastLine的意图，并解决了上面的基本问题。这现在实现了你想要的吗？ http://jsfiddle.net/rakkeh/CZH2p/2/

使元素宽度超出while循环

2 个答案: