首頁(yè) 猿問(wèn) vue.js如何限制顯示數(shù)據(jù)的范圍。

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

JavaScript

慕森王 2019-03-13 13:13:51

從后端拿回的數(shù)據(jù)，想直接顯示在瀏覽器里。寫(xiě)了個(gè)div。但每回返回的數(shù)據(jù)會(huì)很多，經(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;}不知道各位有木有好辦法。

查看完整描述

5 回答

紅顏莎娜

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊

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

反對(duì) 回復(fù) 2019-04-02

叮當(dāng)貓咪

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊

1、js截?cái)?，多余的省略?hào)。這種方式兼容性好
2、CSS3的text-overflow: ellipsis;

反對(duì) 回復(fù) 2019-04-02

陪伴而非守候

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

看你什么需求，就是簡(jiǎn)單的隱藏的話，overflow：hidden
強(qiáng)制1行顯示
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
強(qiáng)制2行顯示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
以此類推。。。。。