删除跨度之间的空白

Question

I have spans setup as so..

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

This outputs

some words .

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

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: I can edit the HTML & remove the white space, but i want to do it programmatically.

Answer 1

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> 

---

Edit

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

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> 

Answer 2

Although not neat I decided to code this with some jquery and 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();

and here is the fiddle. I added more spans to it and it works again. Hope it is good, url: https://jsfiddle.net/eugensunic/kphe5fbL/4/