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

把这串css放在你需要div里面

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

Answer 2

只是单纯的想让超出元素边界的数据不显示的话，直接overflow：hidden，

如果是想通过控制数据达到目的的话，
<div v-for="(item, index) in arr" v-if="index < 10"></div>

Answer 3

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

Answer 4

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

Answer 5

看你什么需求，就是简单的隐藏的话，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;
以此类推。。。。。