删除跨度之间的空白

Remove a white space between spans

本文关键字：空白 之间 删除      更新时间：2023-09-26

我的span设置为…

<span class='Main'>
   <span id='id1'>some</span> <span id='id2'>words</span>
</span> 
<span>.</span>

输出

一些词

有没有办法去掉&保持其他空间不变吗?

我试过trim()，但它删除了我的字符串中的所有空格;前面有很多词(每个词都在一个跨度内)我不想影响它们。

是否有一种方法可以"瞄准"那个特定的空间?

Ed:我可以编辑HTML &删除空白，但我想通过编程来完成。

由于<span>元素默认为inline元素，因此它们之间的空白将被尊重(显示)。避免这种情况的一种方法是删除HTML代码中元素之间不需要的空白:

<span class='Main'><span id='id1'>some</span> <span id='id2'>words</span></span><span>.</span>

编辑

如果你不想改变HTML代码，也许你可以使用CSS来模拟单词之间的空格。

在下面的示例中，我将容器的font-size设置为零以隐藏空白，然后将<span>元素的font-size设置为可读大小(由thirtydot和dsfq发布的方法)。然后我在每个<span>之前添加一些边距，这不是第一个或最后一个子节点。

不可否认，这种方法不是很可靠，特别是当你不能预测是否会有一个时期时。

.container {
  font-size: 0;
}
.container span {
  font-size: 16px;
  background: #DDD;
}
.container span:not(:first-child):not(:last-child) {
  margin: 0 0 0 .5em;
}
<div class="container">
  <span>some</span>
  <span>words</span>
  <span>go</span>
  <span>here</span>
  <span>.</span>
</div>

虽然不整洁，我决定用一些jquery和js编码:

var get = "";
var array = [];
var i = 0;
var concat = "";
var str;
function doAction() {
    $("span").each(function (index, value) {
        if (index != 0) {
            get = $(this).text() + " ";
            array[index] = get;
            if (array[index].trim() == '.') {
                array[index] = array[index - 1].trim() + array[index];
                array[index - 1] = "";

            }
        }
    });
    $("span").each(function (index, value) {
        if (index != 0) {
            $(this).text(array[index]);
        }
    });
}
doAction();

这是小提琴。我给它加了更多的跨度，它又能工作了。希望是好的，url: https://jsfiddle.net/eugensunic/kphe5fbL/4/

相关文章：