2021-03-02

CSSで文章がはみ出た部分を省略する方法

今回は、「CSSで文章がはみ出た部分を省略する方法」について紹介します。

完成形は以下になります。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

1行の文章と複数行の文章ではみ出した部分が「…」と省略されていることが分かると思います。

それでは早速作っていきましょう。

文章が1行の場合

HTML

<!-- 1行を省略する -->
<ul class="list">
    <li>
        <a href="">文章が入ります。文章が入ります。文章が入ります。</a>
    </li>
    <li>
        <a href="">文章が入ります。文章が入ります。文章が入ります。</a>
    </li>
    <li>
        <a href="">文章が入ります。文章が入ります。文章が入ります。</a>
    </li>
</ul>

CSS

/* 1行を省略する */
.list {
	width: 350px;
	margin: 0 auto;
	margin-bottom: 100px;
}
.list li {
	padding: 15px 0;
	border-top: 1px solid #000;
}
.list li:last-child {
	border-bottom: 1px solid #000;
}
.list li a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
}

まずは親要素であるlistに対して幅を指定します。

そしてaタグがはみ出た部分を省略していきたいので、aタグをブロック要素にします。

最後に以下の3行を指定します。

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

これではみ出した文章を省略させることが出来ました！

文章が複数行の場合

HTML

<!-- 複数行を省略する -->
<div class="wrap">
    <input type="checkbox" id="text" name="text">
    <label for="wtext"
        class="description">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</label>
</div>

CSS

/* 複数行を省略する */
.wrap {
	width: 300px;
	margin: 0 auto;
	background-color: bisque;
}
.description{
	cursor: pointer;
	overflow:hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
#text{
	display:none;
}
#showtext:checked ~  .description{
	display:block;
}