Remove a white space between spans

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.

Are you programmatically generating the `` elements? – showdev Aug 03 '15 at 22:57 — showdev, Aug 03 '15 at 22:57

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

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>

edited May 23 '17 at 12:08

Community

1
1

answered Aug 03 '15 at 22:47

showdev

28,454
37
55
73

@boomshanka exactly just remove the space in the HTML as posted above. – Jordan Davis Aug 03 '15 at 22:48
Yes, this is what i want to do - but programmatically via jQuery / js; not by editing the HTML. – boomshanka Aug 03 '15 at 22:49
@showdev Yes, i am & you're right; i tried this originally but cannot work out where the space is coming from. It seems to appear when i `wrapAll()` my id spans with the `Main` class... – boomshanka Aug 03 '15 at 23:04
Hm, maybe you can include the generating code in your question. That might help find a more efficient and reliable solution. – showdev Aug 03 '15 at 23:09

score 0 · Answer 2 · answered Aug 04 '15 at 00:06

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/

Remove a white space between spans

2 Answers2

Edit

Linked