「CSS」clipで文章を途中で終了させるサンプル

2022年6月20日

環境
Google Chrome　102.0.5005.115
構文
text-overflow : 値
clipは文章は途中で終了します。テーブルの列幅をはみ出しません。
無い場合、文字は横にはみ出します。
使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cft {
    width: 100px;
    border: 2px solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
</style>
</head>
<body>
<div class="cft">white-space はtest studyィ</div>
<p class="cft">あいうえお</p>
</body>
</html>

実行結果
text-overflowにclipを指定して文章は途中で終了しています。

CSS

Posted by arkgame

関連記事: