文末にアイコンがあるテキストの省略処理

テキストを複数行で省略する際、文末にアイコンがあるとどういった挙動になるのかを試してみました。

サンプルコード

例として、文末のアイコンをspan要素で実装した場合と疑似要素で実装した場合で試してみます。

<h2>未設定時</h2>
<ul class="list">
  <li class="item">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆ</li>
  <li class="item">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや</li>
</ul>

<h2>span要素で設定時</h2>
<ul class="list">
  <li class="item">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆ<span class="icon_pdf"></span></li>
  <li class="item">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや<span class="icon_pdf"></span></li>
  <li class="item">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも<span class="icon_pdf"></span></li>
</ul>

<h2>疑似要素で設定時</h2>
<ul class="list">
  <li class="item is-pdf">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆ</li>
  <li class="item is-pdf">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや</li>
  <li class="item is-pdf">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</li>
</ul>

.item {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: 300px;
	overflow: hidden;
	font-size: 16px;
}
.item.is-pdf::after {
	content: '';
}
.item.is-pdf::after,
.icon_pdf {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(icon_pdf.svg) center center no-repeat;
	background-size: contain;
}

結果としてはspan要素、疑似要素どちらの場合もテキストと同じような扱いになるようです。
テキスト省略の際にはアイコンも一緒に省略されました。
アイコン省略のデモページ

サイトの要件によっては上記挙動でも問題ないですが、今回はテキストを省略しつつアイコンは表示されたままにしたかったので、実装を変更してみます。
省略する要素内に含まれていると省略されてしまうので、アイコンを別に分けてみます。

<h2>未設定時</h2>
<ul class="list">
  <li class="item">
    <span class="text">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆ</span>
  </li>
  <li class="item">
    <span class="text">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや</span>
  </li>
</ul>

<h2>span要素で設定時</h2>
<ul class="list">
  <li class="item">
    <span class="text">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆ</span>
    <span class="icon_pdf"></span>
  </li>
  <li class="item">
    <span class="text">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや</span>
    <span class="icon_pdf"></span>
  </li>
  <li class="item">
    <span class="text">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</span>
    <span class="icon_pdf"></span>
  </li>
  <li class="item">
    <span class="text">あいうえおかきくけこ</span>
    <span class="icon_pdf"></span>
  </li>
</ul>

テキストを省略する要素を.text、アイコンを.icon_pdfとします。

.list {
	width: 300px;
}
.item {
	display: inline-flex;
	align-items: flex-start;
	line-height: 1.5;
}
.text {
	min-width: 0;
	flex: 1 1 auto;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
}
.icon_pdf {
	display: inline-block;
	flex: 0 0 auto;
	align-self: flex-end;
	position: relative;
	top: -0.25em;
	width: 16px;
	height: 16px;
	background: url(icon_pdf.svg) center center no-repeat;
	background-size: contain;
}

この実装にすると、テキスト省略時にもアイコンは表示されたままになり、イメージに近い実装になりました。
省略時にアイコンを表示したままにするデモページ

注意点として、テキストが1行の場合もテキストの末尾にアイコンがきますが、2行で省略されないくらいのテキスト量の場合は右下に固定になります。
2行目の場合もアイコンを文末に配置したい場合、CSSのみだと難しいのでJavaScriptを使った実装が必要になりそうです。