0

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

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

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

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

$('element').width();

以及原始的 JS 宽度属性：

$('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 回答