段落内の単語間隔をランダム化する方法は？

Question

私は不均等に分布している単語のパネルを作ろうとしています。

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

一つの選択肢であるを使用することができ、単にランダムな位置をしました。

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>

Answer 2

利用JSページ上のランダムな位置を生成します。私はあなたが各単語の間にホワイトスペースの乱数を生成するためにあなたの要素とJSにwhite-space: pre-wrapを使用するために、より複雑なアルゴリズムに

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