JSFiddle - React, Tailwind, and code Playground

by Aleksandr Tomashov

HTML

<p class="example">1.Смеяться, право, не грешно,
Над всем, что кажется смешно.
													   
										                             Н.М.Карамзин
</p>

<p class="example">2.Смеяться, право, не грешно,
Над всем, что кажется смешно.
												 
                                                 Н.М.Карамзин
</p>

<p class="example">3.Смеяться, право, не грешно,
Над всем, что кажется смешно.
													   
										                             Н.М.Карамзин
</p>

<p class="example">4.Смеяться, право, не грешно,
Над всем, что кажется смешно.
													   
										                             Н.М.Карамзин
</p>

<p class="example">5.Смеяться, право, не грешно,
Над всем, что кажется смешно.
													   
                                                 Н.М.Карамзин
</p>

CSS

body {
	background-color: rgb(85, 85, 85);
}

* {color: #fff; hyphens: auto;}

.example {min-width: 250px; width: 300px;
  border-bottom: dotted; padding-bottom: 1.5em;}

/*без комментариев*/
p:nth-child(1) {white-space: normal;}

/*без пробела и переноса. выход за рамки блока. */
p:nth-child(2) {white-space: nowrap;}

/*с пробелами без переноса. выход за рамки блока */
p:nth-child(3) {white-space: pre;}

/*без пробелов с переносом. без выхода за рамки блока*/
p:nth-child(4) {white-space: pre-line;}

/*с пробелами и переносами без выхода за рамки блока*/
p:nth-child(5) {white-space: pre-wrap;}