Question

我遇到的情况是我有一个带有单行文本的容器，完全居中。偶尔，文本会更长，并且会突破到第二行。这会抛弃布局，所以我需要一个解决方案。我正在考虑使用jquery来说，“如果字符数超过28个字符，那么应用-10px的margin-top来居中文本。”

你会如何在jquery中解决这个问题？也就是说，创建一个条件语句，根据字符数应用规则？这是我的html，如果字符数超过28个字符，则redstrip的span类需要-10的margin-top：

<a href="#">
    <img src="images/dummy3.jpg" alt="dummy">
    <span class="redStrip">Here is a bunch of dummy text that is a bit too long</span>
</a>

Answer 1

虽然Anthony的答案很明显，但由于.text()对具有多个元素的jQuery包装集的行为，它只适用于单数元素。（即如果.redstrip选择了多个DOM元素，则简单的if不会将其删除。

扩展回答，您可能需要应用回调过滤器或.each()。

// via filter
var redStrip = $('.redStrip');
redStrip
    .filter(function () { return $(this).text().length > 28 })
    .css('margin-top','-10px')
    ;

// via .each()
var redStrip = $('.redStrip');
redStrip.each(function () {
    var $t = $(this);
    if ($t.text().length > 28) {
        $t.css('margin-top','-10px');
    }
});

Answer 2

页面加载后内容是否保持不变，或者是否通过用户与页面的交互进行更新？假设前者，你可以这样做：

var redStrip = $('.redStrip');
if(redStrip.text().length > 28) {
    redStrip.css('margin-top', '-10px');
}

如果您正在动态更新redStrip的内容，您可以随时将上述代码包装在一个函数中，并且每次都调用它。

编辑：在'-10px'电话中设置.css()。

创建基于字符数应用规则的条件语句

2 个答案: