<h1>normal</h1>
<div class="wrap">
<div class="normal">あああ あああ あああ
ああ ああ
ああ</div>
</div>
<h1>nowrap</h1>
<div class="wrap">
<div class="nowrap">あああ あああ あああ
ああ ああ
ああ</div>
</div>
<h1>pre</h1>
<div class="wrap">
<div class="pre">あああ あああ あああ
ああ ああ
ああ</div>
</div>
<h1>pre-wrap</h1>
<div class="wrap">
<div class="pre-wrap">あああ あああ あああ
ああ ああ
ああ</div>
</div>
<h1>pre-line</h1>
<div class="wrap">
<div class="pre-line">あああ あああ あああ
ああ ああ
ああ</div>
</div>
.wrap {
width: 100px;
background-color: #eee;
}
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
.pre-line {
white-space: pre-line;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.