Question

我有html，我无法更改（因为它来自客户端数据库）类似下面的东西。你可以看到它没有包含在标签中，我也无法选择div，因为我只想在sub_header（如果存在）下使用white-space：pre-line;

<span class="sub_header">Example:</span>
<br/>
Some text
That I need to wrap with white-space:pre-line;
As it displays on one line in html
all the way done to the div
</div>

这甚至可能吗？

Answer 1

$('div.container').css('white-space', 'pre-line');
$('div.container span.sub_header').css('white-space', 'normal');

该代码应该将CSS应用于父div（我假设它具有container类，但将其更改为其他）但不是子跨度。有更优雅的方法可以做到这一点（获取内部内容，排除span，然后将其包装在另一个按照您需要设置的div中）但是这将在一瞬间完成，假设它们都是这种格式。

Answer 2

寻找这样的东西？ http://jsfiddle.net/pKyG7/4/

<div>
    <span class="sub_header">Example:</span><br/>
<div style="font:arial; font-size:26px; white-space:pre-line;">Some text
That I need to wrap with white-space:pre-line;
As it displays on one line in html
    all the way done to the div.</div>
</div>

Answer 3

这是一个jQuery解决方案：http://jsfiddle.net/9PzeS/

$($('.sub_header + br')[0].nextSibling).wrap('<span style="white-space:pre-line"></span>');

不确定它是否理想并且需要一些错误处理，但似乎有效。

编辑 - 稍微可读的版本：

var textNode = $('.sub_header + br')[0].nextSibling;
$(textNode).wrap('<span style="white-space:pre-line"></span>');

$('.sub_header + br')[0]选择示例中的br标记并获取dom节点。 nextSibling是一个vanilla js属性，用于选择下一个兄弟，包括文本节点。

然后我用span用正确的样式包装它。

为未标记的文本添加样式

3 个答案: