文章・単語の折り返しを極めるCSSサンプル

TOP > CSS >文章・単語の折り返しを極めるCSSサンプル
このエントリーをはてなブックマークに追加

文章・単語の折り返しを極めるCSSサンプル

単語の途中でも強制的に折り返す

通常

@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz@Abcdefghijk

CSS適用後

@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz@Abcdefghijk

サンプルソースを表示

CSS

.box {
	width:200px;
	background-color:#ddeeff;
}
.sample1 {
	word-wrap: break-word;
}

HTML

<div class="box sample1">
@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz@Abcdefghijk
</div>

長い単語の場合、「・・・」をつけて途中で表示をやめる

@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz

サンプルソースを表示

CSS

.sample2 {
	overflow: hidden;
	word-wrap:normal;
	word-break:normal;
	white-spce: nowrap;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.box {
	width:200px;
	background-color:#ddeeff;
}

HTML

<div class="sample2 box">
@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz@Abcdefghijkomnopqrstuvwxyz
</div>

単語の途中で折り返さない

通常

●あいう ●かきくけ ●さしすせそ ●たちつてとなに ●あいう ●かきくけ ●さしすせそ ●たちつてとなに ●あいう ●かきくけ ●さしすせそ ●たちつてとなに ●あいう ●かきくけ ●さしすせそ ●たちつてとなに

CSS適用後

●あいう ●かきくけ ●さしすせそ ●たちつてとなに ●あいう ●かきくけ ●さしすせそ ●たちつてとなに ●あいう ●かきくけ ●さしすせそ ●たちつてとなに ●あいう ●かきくけ ●さしすせそ ●たちつてとなに

サンプルソースを表示

CSS

.sample3 span{
	white-space: nowrap;
}

.box {
	width:200px;
	background-color:#ddeeff;
}

HTML

<div class="box sample3">
<span>●あいう</span> <span>●かきくけ</span> <span>●さしすせそ</span> <span>●たちつてとなに</span>
<span>●あいう</span> <span>●かきくけ</span> <span>●さしすせそ</span> <span>●たちつてとなに</span>
<span>●あいう</span> <span>●かきくけ</span> <span>●さしすせそ</span> <span>●たちつてとなに</span>
<span>●あいう</span> <span>●かきくけ</span> <span>●さしすせそ</span> <span>●たちつてとなに</span>
</div>

上下中央揃え

通常

あいうえお かきくけこ さしすせそ たちつてと なにぬねの

上下中央揃え

あいうえお かきくけこ さしすせそ たちつてと なにぬねの

サンプルソースを表示

CSS

.sample4 {
	display:table-cell;
	vertical-align:middle;
	display:inline¥9; /* IE6~IE8 */
	zoom:1¥9; /* IE6~IE8 */
}
.box4 {
	height:100px;
	width:200px;
	background-color:#ddeeff;
}

HTML

<div class="box4 sample4">
あいうえお かきくけこ さしすせそ たちつてと なにぬねの 
</div>

上下中央揃え(*1行でおさまる場合)

あいうえお かきくけこ

サンプルソースを表示

CSS

.sample5 {
	line-height:100px;
	height:100px; 
	width:200px;
	background-color:#ddeeff;
}

HTML

<div class="sample5">
あいうえお かきくけこ 
</div>

リンクに関するスタイルシートの技