2

I raised a qustion here: How to avoid spaces when wrapping markup across multiple lines, and learned that I can avoid white space while writing markup across multiple lines. However, when I apply this method to a element with pseudo-elements ::before and ::after, it doesn't work.

Similarly, if I write markup on only one line as <span class="inline">i, friend</span>, it will display "Hi, friends" as I wish. But when I divide it into multiple lines, it will display "H i, friend s" with needless white spaces within it.

Here is my css code & html code::

.parent {
  font-size: 0;
}
.parent > span {
  font-size: 16px;
  display: inline-block;
}
.parent > span::before {
  content: "H";
}
.parent > span::after {
  content: "s";
}
<p class="parent">
  <span>
    i, friend
  </span>
</p>

I know it's not recommended to write 

<span>
  i, friend
</span>

instead of <span>i, friend</span>.

But if I insist on it(forgive me), is it possible to display "Hi, friends" as I wish?

Community
  • 1
  • 1
LoveMind
  • 43
  • 6
  • The only way I can see this working is to float everything left and put the before and after on the parent: https://jsfiddle.net/n8hxtzos/. Seems like you are creating extra work for yourself, but if you are going to be stubborn... – Pete Oct 10 '16 at 15:28
  • You may use a negative `margin-right` (and `margin-left` for the `::after`) to align the letters. Hackish as hell, and you'll still have a white space (in front of the whole text instead of inside) but might look like what you want (except if 1st or last letter is on their own text line). – Xenos Oct 10 '16 at 16:04
  • @Pete Thanks. Your code really works. Could you tell me why float can trim needless spaces? – LoveMind Oct 11 '16 at 03:24
  • @Pete seems a small problem here. If I add more `` within `

    `, it can only add "H" for the 1st `` and "s" for the last one. Anyway, it works right when I have only one child element.

     – LoveMind Oct 11 '16 at 03:39
  • @Xenos Thanks for your advice. I'm trying to seek for more possibilities, so that's why I look a little stubborn :) – LoveMind Oct 11 '16 at 03:46
  • Thanks to @Nenad Vracar , @Syntac and others' work, and I realized that **parent class is not required here**. But I won't remove them 'cause it may make their answers look wrong. So I put it here. Here is my codes for 2 or more `span`: [css solution from @Nenad Vracar](https://jsfiddle.net/lovemind/cjky58qp/) & [js solution from @Syntac](https://jsfiddle.net/lovemind/ax8pxnqc/) – LoveMind Oct 12 '16 at 07:04

2 Answers2

5

Try inline-flex instead of inline-block

.parent {
  font-size: 0;
}
.parent > span {
  font-size: 16px;
  display: inline-flex;
}
.parent > span::before {
  content: "H";
}
.parent > span::after {
  content: "s";
}
<p class="parent">
  <span>
    i, friend
  </span>
</p>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
1

I dont know a CSS based solution, but you can remove the text nodes (which cause the spaces) with some simple JS:

var pElement = document.querySelector(".parent>span");
for (node of pElement.childNodes)
    if (node.nodeType === 3 )
        node.textContent = node.textContent.trim();

inside window.onload or <body onload=" ... "

Syntac
  • 1,687
  • 11
  • 10
  • Thanks for your idea. I tried your script, but it doesn't seem to work for me . – LoveMind Oct 11 '16 at 03:11
  • 1
    @LoveMind Sorry, that's weird :/. I copied all your code to a jsFiddle and it worked for me (and logically this apporoach will always work). – Syntac Oct 12 '16 at 00:01
  • Oh, it's my fault. I should say sorry. After read the frame code in jsFiddle, I find that I used `window.onload` in a wrong way. btw, I modified your code with `querySelectorAll` so that I can apply it to cases with 2 or more `span`. Much thanks to you! – LoveMind Oct 12 '16 at 06:04