長い文字列をブロックの中に収めるcssについてのメモです。
サンプルとなるHTMLはこちら
[html]
<style>
div#sample{
width:100px;
border:1px solid red;
}
</style>
<div id="sample">
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
</div>
[/html]
表示例
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
はみ出した文字列を省略する場合
はみ出した部分を「…」に変換する方法です。
[html]
<style>
div#sample2{
width:100px;
border:1px solid red;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<div id="sample2">
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
</div>
[/html]
表示例
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
はみ出した文字列を折り返す場合
はみ出した部分を折り返してボックス内にすべて表示する方法です。
[html]
<style>
div#sample3{
width:100px;
border:1px solid red;
word-wrap:break-word;
}
</style>
<div id="sample3">
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
</div>
[/html]
表示例
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg