我的文本有问题:除了 div 子元素外，不能包裹任何东西。 这是我的问题: - 我使用 PHPBB 论坛。评论文本不包含任何容器，我只有纯文本。 - 我需要对每个段落进行文本缩进 - 评论文本包括 img、strong 和许多 html 标签，包括 div(如引号)。
我所想，我所愿: - 使用任何 html 标签将文本换行(因为我可以使用内联 block 缩进)，排除 div - 删除重复的 br 标签，只使用一个 br 标签
我提出了两种解决方案，但这些解决方案存在一些问题。
HTML代码:
<div class="postbody" id="postdiv24216">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni
<div class="quotetitle">valaki írta:</div>
<div class="quotecontent">
<div class="quotetitle">Másvalaki írta:</div>
<div class="quotecontent">No <strong>meg ezt</strong> sem...
<br />
<!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&feature=youtu.be&desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>
<!-- m -->
</div>
<br />Ez tök jó! ez idézet</div>
<br />Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.
<br />
<br />
<br />Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent
oportere corrumpit habemus donec minim offendit tritani tempus risus
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent;
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat
diam interdum agam docendi primis.
<br />
Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto,
tractatos? Constituam dicat convallis perpetua fastidii</div>
CSS 代码:
.postbody {
padding: 5px 15px;
text-align: justify;
}
.quotetitle {
margin: 10px 5px 0 5px;
padding: 4px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #A9B8C2;
color: #333333;
background-color: #A9B8C2;
font-size: 0.85em;
font-weight: bold;
}
.quotecontent {
margin: 0 5px 10px 5px;
padding: 5px;
border-color: #A9B8C2;
border-width: 0 1px 1px 1px;
border-style: solid;
font-weight: normal;
font-size: 1em;
line-height: 1.4em;
font-family:"Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: #FAFAFA;
color: #4B5C77;
}
.firstline {
text-indent: 1.1em;
display:inline-block;
}
JQuery 代码(第一个解决方案): http://jsfiddle.net/mykee/9VpjP/29/
$('.postbody').each(function(){
var container = $(this);
container.contents().filter(function() {
return this.nodeType == 8;
}).remove();
$("div.quotecontent br").remove();
if (container.filter("div", "a")){
var html = container.html().split('<br>');
container.html("");
for(var i in html)
{
if($.trim(html[i]))
container.append('<p class="gensmall"><span class="firstline">'+html[i]+"</span></p>");
}
// $(".firstline > a").unwrap();
$(".firstline > div").unwrap();
}
});
JQuery代码(第二种方案): http://jsfiddle.net/mykee/2AByk/12/
$('.postbody')
.contents()
.filter(function () {
return this.nodeType === 3;
})
.wrap(function () {
return $("<span>").addClass("firstline");
})
.end();
$("span.firstline div").unwrap();
$("span.firstline").filter(function () {
return $.trim($(this).html()) === '';
}).remove();
$('.postbody br').each(function () {
if ($(this).next().is('br')) {
$(this).next('br').remove();
$(this).next('br').remove();
}
});
我的第一个解决方案的问题是:拆分处理所有内容，然后 trim 我的 div。如果 div 包含任何 br 标签，则 div 容器在解包后会出错。我把一个删除到 div 的 br 标签，但这不是解决方案:( 对于第二个解决方案，我的问题是过滤器 nodeType:纯文本将换行到 span、img 或 strong 或任何其他 html 标记将超出 span。
我需要这个结果:
<div class="postbody" id="postdiv24216">
<p class="gensmall"><span class="firstline">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni</span></p>
<div class="quotetitle">valaki írta:</div>
<div class="quotecontent">
<div class="quotetitle">Másvalaki írta:</div>
<div class="quotecontent">No <strong>meg ezt</strong> sem...
<br />
<!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&feature=youtu.be&desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>
<!-- m -->
</div>
<br />Ez tök jó! ez idézet</div>
<p class="gensmall"><span class="firstline">Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.</span></p>
<p class="gensmall"><span class="firstline">Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent
oportere corrumpit habemus donec minim offendit tritani tempus risus
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent;
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat
diam interdum agam docendi primis.</span></p>
<p class="gensmall"><span class="firstline">Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto,
tractatos? Constituam dicat convallis perpetua fastidii</span></p>
</div>
有什么困难:这是一个帖子，我在一页上有更多帖子。我现在使用第一个解决方案，但不是更好。
如何在 div.postbody 中排除任何 div，但在其他文本的首行换行和缩进？
最佳答案
您可以对整个 .postbody 应用 padding-left，然后使用负边距将引号向左移动。这将为您提供纯 CSS 解决方案。
相关的变化是:
.quotetitle {
margin: 10px 5px 0 -20px;
}
.quotecontent {
margin: 0 5px 10px -20px;
}
.quotecontent .quotecontent,
.quotecontent .quotetitle {
margin-left: 5px;
}
.postbody {
padding-left: 20px;
}
在这种情况下，我应用了 20 像素的填充/边距。
仅在 Chrome 中测试。
我不熟悉 phpbb，所以我不能保证这个解决方案不会干扰您更广泛的布局，但稍微调整一下它应该是可靠的。
关于javascript - 使用 Jquery 用除 div 之外的任何标签包装文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20888666/