CSS Example: Line-Break Property

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">	
<title>Example</title>

<!-- CSS -->	
<style>
div {
width: 12em;
background: beige;
margin-right: 1em;
float: left;
}

.line-break {
line-break: strict;
}
</style>

</head>
<body>

<!-- HTML -->
<div>
<strong>Normal:</strong>
<p>本日のJASDAQ市場では、JASDAQ平均が続落、JASDAQ-TOP20、J-Stock Indexは反発となった。値上がり数は344、値下がり数は272、変わらずは96。JASDAQ平均は安寄り後もみ合い、一時はプラス圏に浮上も引けにかけ伸び悩んだ。日経平均が想定外の大幅上昇となる中で大型株に関心が向かう形となり、中小型株に資金が向かわなかった。売買代金は今年の最低水準を更新へ。</p>
</div>

<div class="line-break">
<strong>line-break:</strong>
<p>本日のJASDAQ市場では、JASDAQ平均が続落、JASDAQ-TOP20、J-Stock Indexは反発となった。値上がり数は344、値下がり数は272、変わらずは96。JASDAQ平均は安寄り後もみ合い、一時はプラス圏に浮上も引けにかけ伸び悩んだ。日経平均が想定外の大幅上昇となる中で大型株に関心が向かう形となり、中小型株に資金が向かわなかった。売買代金は今年の最低水準を更新へ。</p>
</div>

</body>
</html>

​x
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<title>Example</title>
​
<!-- CSS -->    
<style>
div {
width: 12em;
background: beige;
margin-right: 1em;
float: left;
}
​
.line-break {
line-break: strict;
}
</style>
​
</head>
<body>
​
<!-- HTML -->
<div>
<strong>Normal:</strong>
<p>本日のJASDAQ市場では、JASDAQ平均が続落、JASDAQ-TOP20、J-Stock Indexは反発となった。値上がり数は344、値下がり数は272、変わらずは96。JASDAQ平均は安寄り後もみ合い、一時はプラス圏に浮上も引けにかけ伸び悩んだ。日経平均が想定外の大幅上昇となる中で大型株に関心が向かう形となり、中小型株に資金が向かわなかった。売買代金は今年の最低水準を更新へ。</p>
</div>
​
<div class="line-break">
<strong>line-break:</strong>
<p>本日のJASDAQ市場では、JASDAQ平均が続落、JASDAQ-TOP20、J-Stock Indexは反発となった。値上がり数は344、値下がり数は272、変わらずは96。JASDAQ平均は安寄り後もみ合い、一時はプラス圏に浮上も引けにかけ伸び悩んだ。日経平均が想定外の大幅上昇となる中で大型株に関心が向かう形となり、中小型株に資金が向かわなかった。売買代金は今年の最低水準を更新へ。</p>
</div>
​
</body>
</html>

In this example, the left side provides the code used to render the output in the right side.

Feel free to copy and paste the code into your own project and modify as you wish.

More Examples >>

About CSS

CSS stands for Cascading Style Sheets. It's used to add styles to web pages. It's typically added to HTML pages using the <link> tag, so that we can have the CSS in a separate file to the HTML file. However, we also have the option of embedding the CSS in the actual HTML file by using the <style> HTML tag, or by using the style attribute within an individual HTML tag.