CSS
.sample-normal {
white-space: normal;
margin: 1em;
width: 300px;
border: 1px solid #666666;
}
.sample-pre {
white-space: pre;
margin: 1em;
width: 300px;
border: 1px solid #666666;
}
.sample-nowrap {
white-space: nowrap;
margin: 1em;
width: 300px;
border: 1px solid #666666;
}
.sample-pre-wrap {
white-space: pre-wrap;
margin: 1em;
width: 300px;
border: 1px solid #666666;
}
.sample-pre-line {
white-space: pre-line;
margin: 1em;
width: 300px;
border: 1px solid #666666;
}
HTML
<h5>normal</h5>
<div class="sample-normal">
This is short sentence.
This is very very very very very long sentence.
</div>
<h5>pre</h5>
<div class="sample-pre">
This is short sentence.
This is very very very very very long sentence.
</div>
<h5>nowrap</h5>
<div class="sample-nowrap">
This is short sentence.
This is very very very very very long sentence.
</div>
<h5>pre-wrap</h5>
<div class="sample-pre-wrap">
This is short sentence.
This is very very very very very long sentence.
</div>
<h5>pre-line</h5>
<div class="sample-pre-line">
This is short sentence.
This is very very very very very long sentence.
</div>
表示
normal
This is short sentence.
This is very very very very very long sentence.
pre
This is short sentence.
This is very very very very very long sentence.
nowrap
This is short sentence.
This is very very very very very long sentence.
pre-wrap
This is short sentence.
This is very very very very very long sentence.
pre-line
This is short sentence.
This is very very very very very long sentence.