如何从带给定类的跨尾移除？

Question

我需要在给定跨度的值之后删除 。

HTML如下所示：

<span class="number">0.15&nbsp;</span>

辅助设备来自服务器(CMS)。

是否有任何方法可以通过使用CSS规则来删除？

Answer 1

如果这个值是由CMS提供的，那么您可以通过str_replace(' ', '', $yourVar)修改这个值，然后再在span中回显它。

如果你不能访问这个，你也可以使用jQuery来做这个.正如穆罕默德·阿里所说：

var str = $('.number').html();
str = str.replace(' ', '');
$('.number').html(str);

像这样的东西会管用的。但有了CSS，我想是不可能的。

Answer 2

你不能只用css来做这件事。不知何故，您必须为此使用jquery。使用正则表达式，您可以简单地做到这一点。

var span = $('span').html();
span = span.replace(/ /g, '');
$('span').html(span);

演示

注意：  来自CMS，当文档完全加载时，您必须使用jquery代码来替换它。

$(document).ready(function(){
    var span = $('span').html();
    span = span.replace(/ /g, '');
    $('span').html(span);
});

Answer 3

您不能使用CSS从文档内容中删除字符。这不是CSS的作用。可以添加要呈现的字符，包含生成的内容，但不能删除。

但是，您可能可以撤消字符对呈现的影响。请考虑以下示例：

<span class="number">0.15&nbsp;</span>foo

无中断空间( )有两种效果:它会导致可见的间距，与正常的空格字符相同，并且在浏览器格式化文本时防止“0.15”和“foo”之间的行间隔。为了防止后一种效果，您可以使用生成的内容添加一个正常的空间，但是当行间隔不出现时，会有太多的间隔。要解决这个问题，请将伪元素的宽度设置为零：

.number:after { content: " "; display: inline-block; width: 0; }

若要删除不间断空间的间隔效果，可以设置一个负的右边距。这方面的主要问题是，不间断空间(和空格)的宽度取决于字体。它平均约为一个em的四分之一，但它可能有很大的差异。如果您可以将字体视为固定字体(例如，您使用的是@font-face)，则可以使用以下代码，只需根据需要调优数字值：

 .number {  display: inline-block; margin-right: -0.25em; }

作为一个副作用，这也可能允许在“0.15”和“foo”之间出现行间隔，因为浏览器可以以格式处理内联块，因此它们总是允许前后中断行。