删除跨度之间的空白

Question

我有跨度设置..

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

这个输出

一些单词 。

有没有一种方法可以在句点之前删除空间并保持其余空间不变？

我已经尝试过trim()但这会删除字符串中的所有空格； 我不想影响前面的很多单词（每个单词都在一个范围内）。

有没有一种方法可以“瞄准”特定的空间？

埃德：我可以编辑HTML并删除空白，但我想以编程方式进行。

Answer 1

由于<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设置为可读的大小（ 三十点和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> 

Answer 2

虽然不整洁，但我还是决定使用一些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/