div {
width: 200px;
height: 150px;
background-color: pink;
margin: 100px auto;
/* 长单词和长数字,不会强行中断换行,默认情况下会另起一行显示 */
/* 但是会造成,上一行文字后面有空白剩余空间 */
/* 强制要求全部中断换行显示 */
word-break: break-all;
/* 需求:单行文本溢出用省略号显示 */
/* （设置文字在一行显示，不能换行） */
white-space: nowrap;
/* （文字长度超出限定宽度，则隐藏超出的内容） */
overflow: hidden;
/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
text-overflow: ellipsis;
/* 需要搭配宽度条件 */
}
p {
width: 200px;
height: 150px;
background-color: skyblue;
margin: 100px auto;
word-break: break-all;
/* 需求:多行文本 */
/* 看到数字,就想到是控制行数的代码 */
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 需要搭配合适的宽度和高度,修改需要的行数 */
}
</style>
</head>
<body>
<div>测试内容测试内容测试内容试内容测试adafdfdffdsdasdasd测试内测试测试测试111111111111111容</div>
<p>测试内容测试内容测试内容试内容测试adafdfdffdsdasdasd测试内测试测试测试111111111111111容</p>
</body>
</html>
扫一扫
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
