How vue.js limits the range of data displayed.

the data retrieved from the backend want to be displayed directly in the browser. Wrote a div. But each time a lot of data will be returned, often in width beyond the boundary, very ugly. How to set so that the data is only displayed in the set box.
Front end Code:

<div class="show-data">
      {{searchRst}}                
</div>

CSS:

.show-data{
  background-color: -sharpd7d8dd;
  color: -sharp000000;
  width: 900px;
  height: 800px;
  font-weight: 900;
  margin-bottom: 80px;
  margin-top: 10px;
}

I wonder if you have any good ideas.

Mar.11,2021

put this string of css in the div you need

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

if you simply want the data beyond the boundary of the element not to be displayed, overflow:hidden,

directly.

if you want to achieve your goal by controlling the data,
< div VMI force = "(item, index) in arr" VMI if = "index < 10" > < / div >


intercept some of the words that are not all shown?


1, js truncation, extra ellipsis. This method has good compatibility
2, CSS3 text-overflow: ellipsis;


depends on your needs, that is, simply hiding, overflow:hidden
forces 1 line to show
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
forces 2 lines to show
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
and so on.

Menu