如何在段落中随机化字间距？

Question

我试图制作一组分布不均匀的单词。

这是一个非常基本的样本图片：

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

＆＃13;

＆＃13;

repartition(x, 1)

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

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

有什么建议吗？

Codepen for those who prefer

Answer 1

使用JS在页面上生成随机位置。我做了简单的随机位置，你可以使用更复杂的算法

$(document).ready(function() {
  var texts = $('p').text().split(' ');

  $('p').text('');
  $.each(texts,
    function() {
      $('p').append(
        $('<span>', {
          text: this,
          "class": this == 'fifteen' ? 'active' : '',
          css: {
            left: Math.floor(Math.random() * $('p').width()),
            top: Math.floor(Math.random() * $('p').height()),
            fontSize: Math.floor(Math.random() * 20) + 10
          }
        })
      );
    });
});

p {
  width: 100%;
  height: 400px;
  position: relative;
}
p span {
  position: absolute;
  font-size: 18px;
  color: #555;
}

p span.active {
  color: #00aaff;
  font-weight: bold;
  }

<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 fifteen sixteen seventeen eighteen nineteen twenty</p>

Answer 2

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

＆＃13;

＆＃13;

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)

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;