禁用<code> tag

Question

Building on Disable selectability for a space I now have an even more special problem. Basically, I have the following code:

.meta {
  user-select: none;
}

.bash {
  display: inline-block;
}

.meta:after {
  content: '\00a0';
}

<pre><code><span class="meta">$</span><span class="bash"> ls</span></code></pre>

Now, I want the user to be able to select the ls, but not the $ (including the space). While this already works for the $ character, it does not work for the space after it. How can this be solved?

And, due to the <pre> tag there are now two spaces: While the one inserted by CSS can not be selected, the other one still can. One way to solve this is to add a text-indent: -7px and a overflow-x: hidden to the .bash class, but this breaks the layout (for whatever reason).

So, how can this be fixed without touching the HTML? (Please note that I have no influence on the HTML code, only on the CSS.)

Answer 1

pre tag preserves spaces and line breaks, you need to set .bash's white-space to initial, but IE does not take initial value so it's better to use both white-space: normal; and white-space: initial;

.meta {
  user-select: none;
}

.bash {
  display: inline-block;
  white-space: normal;
  white-space: initial;
}

.meta:after {
  content: '\00a0';
}

<pre><code><span class="meta">$</span><span class="bash"> ls</span></code></pre>