zoukankan html css js c++ java

css处理文本折行截断

包括单行文本折行和多行文本折行

#para {
     400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

规定行数的截断处理方式(多行)

#para {
     400px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       #para{
             width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class="wrap" style="background-color:#ff0;">
      <p id="para">
        hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!
     </p>

    </div>
</body>
</html>

查看全文

相关阅读:
springMvc接口请求参数
 ThreadLocal 结构
 遇到的问题
 jsonview的安装
 Java
学习资源
 Java
Java
Java
Java

原文地址：https://www.cnblogs.com/circleone/p/7144644.html