テキスト オーバーフロー [単一行および複数行のテキスト オーバーフロー]

単一行テキストのオーバーフロー方法:

方法 1:

省略記号を表示 (省略記号): テキストの 1 行がオーバーフローした場合、省略記号が表示され、切り詰められていることを示します。具体的な実装方法は text-overflow: ellipsis を設定することであり、white-space 属性と overflow 属性も設定する必要があります。

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

方法 2:

表示文字列(string)： 一行テキストがはみ出した場合に、指定した文字列を表示します。具体的な実装方法は、text-overflow:stringを設定し、同時にcontent属性も設定します。

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

.text::after {
  content: "..."; /* 溢出时显示... */
}

方法 3:

改行なし（クリップ）： 単一行のテキストがはみ出した場合、余分な部分が直接カットされます。具体的な実装方法は text-overflow:clip を設定することであり、white-space 属性と overflow 属性も設定する必要があります。

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

複数行テキストのオーバーフロー:

方法 1:

省略記号を表示 (省略記号): 複数行のテキストがオーバーフローする場合、省略記号を表示して、切り詰められていることを示します。具体的な実装方法は、display: -webkit-box、-webkit-box-orient:vertical を設定することです。また、overflow プロパティと text-overflow プロパティも設定する必要があります。

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

方法 2:

JavaScript を使用して複数行テキストのオーバーフローを処理する: 実際の開発では、JavaScript を使用して複数行テキストのオーバーフローを処理することもできます。より一般的なライブラリには、line-clamp.js やclamp.js などがあります。

<div class="text" id="text">
  一段多行文本，需要进行溢出处理...
</div>

<script src="https://unpkg.com/clamp-js/dist/clamp.min.js"></script>
<script>
  clamp(document.getElementById('text'), { clamp: 3 });
</script>