Question

我的跨度设置如此......

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

此输出

有些话。

有没有办法在句号之前删除空格＆amp;保持其余的空间完整吗？

我尝试了trim()但删除了字符串中的所有空格;之前有很多单词（每个都在一个范围内），我不希望受到影响。

有没有办法'定位'那个特定的空间？

Ed：我可以编辑HTML＆amp;删除空白区域，但我想以编程方式执行此操作。

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设置为零以隐藏空格，然后将font-size个<span>元素设置为可读大小（方法）已发布by thirtydot和by 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();

这里是小提琴。我添加了更多的跨度，它再次起作用。希望它很好，网址：https://jsfiddle.net/eugensunic/kphe5fbL/4/

移除跨距之间的空白区域

2 个答案:

修改