Wie Randomise Wortabstand in einem Absatz?

Question

Ich versuche, ein Feld von Wörtern zu machen, die ungleich verteilt sind.

Hier ist ein sehr einfaches Beispielbild:

Verwenden von text-align und Wortabstand ich in der Nähe bin gekommen ..

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>

aber ich d mag den Abstand zwischen Wörtern zufällig randomisieren. Ist das mit CSS möglich? Ich bin offen für die Änderung der HTML, aber diese Panels sind dynamisch generiert und könnte eine beliebige Anzahl von Wörtern haben.

Irgendwelche Vorschläge?

Codepen for those who prefer

Answer 1

Eine Option ist white-space: pre-wrap auf Ihrem Element verwenden und js zwischen den einzelnen Wörtern Zufallszahl der weißen Räume zu erzeugen.

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

Verwenden JS zufällige Position auf Seite zu generieren. Ich habe einfach zufällige Position, können Sie komplexeren Algorithmus

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