删除跨度之间的空白 [英] Remove a white space between spans

问题描述

我已经设置了跨度.

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

这将输出

一些话.

是否可以在句号&之前删除空格?保持其余空间完好无损?

Is there a way to remove the space before the period & keep the rest of the spaces intact?

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

I've tried trim() but that removes all spaces in my string; there are many words preceding (each within a span) that i do not want effected.

有没有一种方法可以定位"特定的空间?

Is there a way to 'target' that particular space?

Ed:我可以编辑HTML&删除空白，但是我想以编程的方式做到这一点.

Ed: I can edit the HTML & remove the white space, but i want to do it programmatically.

推荐答案

由于

Since <span> elements are inline elements by default, the white space between them will be respected (displayed). One way to avoid this is to remove the undesired white space between the elements in your HTML code:

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

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

If you don't want to alter the HTML code, maybe you can use CSS to simulate spaces between words.

在下面的示例中，我将容器的font-size设置为零以隐藏空白，然后将<span>元素的font-size设置为可读的大小(方法中的two-span-tags#answer-25667514>然后在每个不是第一个或最后一个孩子的<span>之前添加一些边距.

In the example below, I'm setting the font-size for the container to zero to hide white space, then setting the font-size of <span> elements to a readable size (a method posted by thirtydot and by dsfq). Then I'm adding some margin before each <span> that is not the first or last child.

诚然，这种方法不是很可靠，尤其是在您无法预测是否会有周期的情况下.

Admittedly, this method is not very reliable, especially if you can't predict whether there will be a period or not.

.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>

这篇关于删除跨度之间的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！