css文本样式

71 阅读1分钟

单行截断

 overflow:hidden; //超出的文本隐藏
 text-overflow:ellipsis; //溢出用省略号显示
 white-space:nowrap; //溢出不换行

多行截断

  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

两端对齐

<!doctype html>
<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">
  <title>Document</title>
  <style>
    div,p{
      text-align: justify;/*两端对齐*/
      border: 1px solid red;
      width: 100px;
      text-justify:inter-ideograph;/*IE支持*/
    }
    div::after,p::after{
      content: "";
      display: inline-block;
      width: 100%;
    }
  </style>
</head>
<body>
<p>
  我谁
</p>
<div>
  我不知道
</div>
</body>
</html>