javascript - 如何随机化段落中的字间距？

Question

我正在尝试制作一组​​分布不均的单词。

这是一个非常基本的示例图像:

使用 text-align 和 word-spacing 我已经接近..

body {
  width: 500px;
  margin: 50px auto 0;
}
p {
  background: lightgrey;
  padding: 2em;
  font-size: 2em;
  font-family: sans-serif;
  word-spacing: 2em;
  text-align: center;
}
p span {
  font-size: 1em;
  color: white;
}

<p>one two three four five six seven eight nine ten eleven twelve thirteen fourteen <span>fifteen</span> sixteen seventeen eighteen nineteen twenty</p>

但是我想随机化单词之间的间距。这可以用 CSS 实现吗？我愿意更改 HTML，但这些面板是动态生成的，可以包含任意数量的单词。

有什么建议吗？

Codepen for those who prefer

Answer 1

一种选择是在您的元素和 js 上使用 white-space: pre-wrap 以在每个单词之间生成随机数量的空白。

var min = 1;
var max = 15;
var newText = $('p').html().replace(/\s/g, function() {
  return " ".repeat(parseInt(Math.random() * (max - min) + min))
});
$('p').html(newText)

body {
  width: 500px;
  margin: 50px auto 0;
}
p {
  background: lightgrey;
  padding: 2em;
  font-size: 1.5em;
  font-family: sans-serif;
  text-align: center;
  white-space: pre-wrap;
}
p span {
  font-size: 1em;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>one two three four five six seven eight nine ten eleven twelve thirteen fourteen <span>fifteen</span> sixteen seventeen eighteen nineteen twenty</p>