戻る

折り返し、改行
折り返し、改行について

word-break

word-break:break-word
単語を基準に折り返しをします。
調べたところ、この値は非推奨のようで、互換性のために残されているようです。

[サンプル]
To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
上記のサンプルをみてもわかるように、単語を考慮して折り返しをします。
<div style="word-break: break-word;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

word-break:break-all
指定された横幅にあわせた改行をします。
[サンプル]
To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
上記のサンプルをみてもわかるように、単語を考慮せず、横幅にあわせた折り返しをします。

<div style=word-break:break-all;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

overflow-wrap
単語の途中で改行してでも要素内に収まるように折り返します。
[サンプル]
To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
<div style="overflow-wrap: anywhere;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

white-space
空白文字を起点とした折り返し処理です。
[サンプル]
white-space: normal
連続する空白文字を1つの空白として扱い、テキストを折り返します

To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
<div style="white-space: normal;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

white-space: pre-wrap
連続する空白文字をそのまま表示し、テキストを折り返します。

To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
<div style="white-space: pre-wrap;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

white-space: nowrap
テキストを折り返さずに表示します。

To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
<div style="white-space: nowrap;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

display: inline-block
親要素の幅に合わせてテキストを折り返します。

[サンプル]

To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.


<div style="display: inline-block;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>


戻る
back

Wrapping and line breaks
About wrapping and line breaks

word-break

word-break:break-word
Wraps based on words.
After looking into it, this value seems to be deprecated and is left for compatibility.

[Sample]
To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
As you can see from the sample above, word wrapping is done with consideration for words. 
<div style="word-break: break-word;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

word-break:break-all
Inserts line breaks to fit the specified width.
[Sample]
To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
As you can see from the sample above, the text wrapping is done based on the width, without considering the words. 

<div style=word-break:break-all;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

overflow-wrap
It will wrap text so that it fits within the element even if it breaks the text in the middle of a word.
[Sample]
To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
<div style="overflow-wrap: anywhere;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

white-space
This is wrapping processing starting from whitespace characters.
[Sample]
white-space: normal
Consecutive whitespace characters are treated as one space, and text is wrapped.

To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
<div style="white-space: normal;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

white-space: pre-wrap
Displays consecutive whitespace characters as is and wraps the text.

To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
<div style="white-space: pre-wrap;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

white-space: nowrap
Displays text without wrapping.

To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.
<div style="white-space: nowrap;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>

display: inline-block
Wraps text to fit the width of the parent element.

[Sample]

To execute this process, we use "setInterval".setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).setInterval returns a positive integer return value (ID) that identifies the timer.*Normally, this is a positive integer value starting from 1.


<div style="display: inline-block;width:300px;background-color:aliceblue;">
To execute this process, we use "setInterval".
setInterval is a timer that repeatedly executes a callback function at a specified interval (milliseconds).
setInterval returns a positive integer return value (ID) that identifies the timer.
*Normally, this is a positive integer value starting from 1.
</div>


back



著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。