vue.js如何限制显示数据的范围。

Question

从后端拿回的数据，想直接显示在浏览器里。写了个div。但每回返回的数据会很多，经常在宽度上超出边界，很难看。怎么设置能让数据只显示在设定的框内。

前端代码：

<div class="show-data">

      {{searchRst}}                

</div>

CSS：

.show-data{

  background-color: #d7d8dd;

  color: #000000;

  width: 900px;

  height: 800px;

  font-weight: 900;

  margin-bottom: 80px;

  margin-top: 10px;

}

不知道各位有木有好办法。

Answer 1

不全都显示的话截取一部分？

Answer 2

1、js截断，多余的省略号。这种方式兼容性好2、CSS3的text-overflow: ellipsis;

Answer 3

看你什么需求，就是简单的隐藏的话，overflow：hidden强制1行显示overflow: hidden;text-overflow: ellipsis;white-space: nowrap;强制2行显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;以此类推。。。。。