首页 > html > text > Page Widget - 如何控制文本溢出和省略号

Page Widget - 如何控制文本溢出和省略号

text 【text】
我们想知道如何控制文本溢出和省略号。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}
</style>
</head>
<body>
  <div class="box">
    <div class="text">Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Aliquam consectetur venenatis blandit. Praesent
      vehicula, libero non pretium vulputate, lacus arcu facilisis lectus,
      sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis
      euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi,
      accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque
      eleifend lectus in bibendum. Suspendisse lacinia egestas felis a
      volutpat.
      
            Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Aliquam consectetur venenatis blandit. Praesent
      vehicula, libero non pretium vulputate, lacus arcu facilisis lectus,
      sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis
      euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi,
      accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque
      eleifend lectus in bibendum. Suspendisse lacinia egestas felis a
      volutpat.      
      
    </div>
  </div>
</body>
</html>