如何隨機化段落中的詞間距？

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>

不過我d喜歡隨機分配單詞之間的間距。這可能與CSS？我願意改變HTML，但這些面板是動態生成的，可以有任何數量的單詞。

有什麼建議嗎？

Codepen for those who prefer

Answer 1

一種選擇是使用white-space: pre-wrap你的元素和JS上生成每個單詞之間的空格的隨機數。

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生成頁面上的任意位置。我做了簡單的隨機位置，你可以使用更復雜的算法

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