在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue.js如何限制顯示數(shù)據(jù)的范圍。

vue.js如何限制顯示數(shù)據(jù)的范圍。

從后端拿回的數(shù)據(jù)，想直接顯示在瀏覽器里。寫了個div。但每回返回的數(shù)據(jù)會很多，經(jīng)常在寬度上超出邊界，很難看。怎么設(shè)置能讓數(shù)據(jù)只顯示在設(shè)定的框內(nèi)。
前端代碼：

<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;
}

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

回答
編輯回答
任她鬧

1、js截斷，多余的省略號。這種方式兼容性好
2、CSS3的text-overflow: ellipsis;

2018年4月5日 05:02
編輯回答
溫衫

不全都顯示的話截取一部分？

2018年9月9日 07:37
編輯回答
傲寒

只是單純的想讓超出元素邊界的數(shù)據(jù)不顯示的話，直接overflow：hidden，

如果是想通過控制數(shù)據(jù)達到目的的話，
<div v-for="(item, index) in arr" v-if="index < 10"></div>

2017年6月29日 21:38
編輯回答
做不到

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

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
2017年3月6日 10:49
編輯回答
朽鹿

看你什么需求，就是簡單的隱藏的話，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;
以此類推。。。。。

2018年2月23日 19:16