Question

所以我得到了一些div，我将其与lettering.js分开。这样做只是将元素拆分为包含单个字符的<span>。

当我得到一个包含多个单词的字符串（如“ Hello World！”）时，lettering.js将为单词之间的间隔创建一个单独的跨度。该跨度将没有宽度，因为其“空”→单词之间没有空格。

因此，从理论上讲，我应该可以使用span:blank选择那些“空”的跨度（并手动设置空格的宽度），因为：blank也会选择空白。那是行不通的。

所以我尝试使用JavaScript，但即使失败了。

我尝试了几种方法：

$("span[class^='char']").each(function(){
  // method 1:
  this.innerHTML.trim();

  // method 2:
  $(this).text().trim(); 

  // method 3:
  $(this).text().replace(/\s/g, '');

  // method 4:
  $(this).text().replace(' ', '');
});

但是所有这些方法都失败了。

选择器不是问题。它会选择我想要的每个跨度。

另一种方法是为每个跨度设置一个min-width，这很破旧，而且效果并不总是很好。

任何人都知道我如何才能将那些“空” <span>显示为空格？

Here's a link上的问题的实时示例，如果您想检查一下的话。

更新：从span元素中删除display:inline-block会显示该空间。我无法删除它，因为如果没有它，转换动画将无法正常工作。

Answer 1

您可以使用：empty伪选择器，并通过CSS中的内容添加空格；

span:empty{
   content:' ';
   display: inline-block;
  }

<span>A</span>
<span></span>
<span>B</span>

Answer 2

  You can use letter-spacing to remove white space between the text.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    div.a {
      width: auto;
      border: 1px solid black;
      letter-spacing:0px
    }

    div.b {
      width: 150px;
      border: 1px solid black;  
    }

    div.c {
      width: 50%;
      border: 1px solid black;  
    }
    </style>
    </head>
    <body>
    <h1>The width Property</h1>

    <h2>width: auto (default)</h2>
    <div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>



    </body>
    </html>

无法删除空格（在使用letter.js分割div之后）

2 个答案: