テキストのオーバーフローを省略
1 行のテキスト オーバーフローを省略
テキストは 1 行にのみ表示されます
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width: 200px;
border: 1px solid black;
overflow: hidden; /*溢出省略*/
white-space: nowrap; /*不允许换行*/
text-overflow: ellipsis; /*省略标识为省略号*/
}
</style>
</head>
<body>
<p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
効果
マルチ テキスト オーバーフロー
身長に合わせてカット
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
overflow: hidden; /*溢出省略*/
padding-right: 10px;
word-break: break-all; /*英文单词换行时进行拆分*/
}
P::after{
content: '...';
position: absolute; /*追加省略标记并且定位与右下角*/
right: 0;
bottom: 0;
overflow: hidden;
}
</style>
</head>
<body>
<p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
効果
行数に基づいて切り捨てる
他のブラウザと互換性がない chrome ブラウザのプライベート プロパティが使用されます。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width: 200px;
display: -webkit-box; /* 必须设置 display 类型为 -webkit-box */
-webkit-line-clamp: 2; /* 设置第几行省略 */
-webkit-box-orient: vertical; /* 设置其元素垂直布局其内容 */
overflow: hidden; /* 溢出省略 */
word-break: break-all; /*英文单词换行时进行拆分*/
}
</style>
</head>
<body>
<p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
効果
