超出文本用省略号表示

1--单行文本

    <style type="text/css">
        .txt{
            width:100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>

  <div class="txt">幸福像花儿一样，我的快乐我做主。临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！幸福像花儿一样，
   我的快乐我做主。临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！幸福像花儿一样，我的快乐我做主。临渊羡鱼不如退而结网。
  你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！幸福像花儿一样，我的快乐我做主。临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，
  不要灰心不要丧气。youcan！幸福像花儿一样，我的快乐我做主。临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！幸福像花儿一样，
  我的快乐我做主。临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！
</div>

 2--多行文本

    <style type="text/css">
        .txt{
            width: 100px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
                 }
    </style>

<div class="txt">幸福像花儿一样，我的快乐我做主。。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！幸福像花儿一样，我的快乐我做主。
临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！幸福像花儿一样，我的快乐我做主。临渊羡鱼不如退而结网。你要相信，
生活对每一个人都是公平的，不要灰心不要丧气。youcan！幸福像花儿一样，我的快乐我做主。临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。
youcan！幸福像花儿一样，我的快乐我做主。临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！幸福像花儿一样，我的快乐我做主。
临渊羡鱼不如退而结网。你要相信，生活对每一个人都是公平的，不要灰心不要丧气。youcan！
</div>

 

转载于:https://www.cnblogs.com/haimengqingyuan/p/6925509.html