While循环获取元素宽度

问题描述：

我试图打破一个文本块到单独的行。每行需要尽可能多的单词，而不是增长到大于容器的宽度。While循环获取元素宽度

使用jQuery我创建了这样做的功能，但我有它的问题。

内部while循环我通过我的文字块和我抢6个字穿上线。我想比较该文本的宽度和该容器的宽度。但是，我尝试的所有内容都是从while循环中突出显示的。

$('element').width();

和原始JS width属性：

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

似乎都没有工作，但我不知道为什么

我使用jQuery的方法来获得宽度试过吗？谁能帮忙？

这里是一个的jsfiddle折断被注释掉的链接。

http://jsfiddle.net/CZH2p/

提前感谢！

对不起，但你为什么要这么做？你可以通过正确设计容器来实现这种行为，而不会污染你的文本
标签 – Roy 2013-02-16 22:19:18

这是创建一个非常具体的程式化头，只能这样做。它使用动态文本，因此在事实之前无法分解它。你也看过代码吗？没有添加br标签。每行文本都需要有背景颜色和填充。使用内联块或块进行不破碎文本会创建一个实体块，并在文本内部打破文本。使用内联显示你不能添加填充。 – Jeffpowrs 2013-02-16 22:24:42

不过，为什么这是唯一的方法？修正标题宽度有什么问题？（我想尝试和尽快帮助你，因为我确信这是一个好主意:)） – Roy 2013-02-16 22:31:41

答

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

是的，我最初尝试过这条路线，但我无法解决的问题是在换行处获得填充。有任何想法吗？ – Jeffpowrs 2013-02-16 23:39:36

这应该这样做 – naugtur 2013-02-16 23:44:59

如果您希望使单词之间的间距与外层线条的宽度相同，请在浮动元素上使用负左边距，并在背景中使用透明度。改变整个包装节点的不透明度。 – naugtur 2013-02-16 23:58:09

答

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

While循环获取元素宽度

相关推荐