If there is too much content, an ellipsis will be displayed. When the mouse is hovering, all will be displayed.

Set a title attribute to the parent element, and the content of the title can be displayed after hovering the mouse.

 <div class="cwli-r ellipsis" :title="detailData.deptPathName">
              {
   
   { detailData.deptPathName }}
            </div>

css to display ellipses in a single line

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Multiple lines omitted css

overflow: hidden;
/* text-overflow: ellipsis; */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

Effect:

Guess you like

Origin blog.csdn.net/zhuangjiajia09/article/details/122447289