web不设置宽度实现超出隐藏、display: table、table-layout: fixed、white-space: nowrap、text-overflow: ellipsis

html

<div class="box"> <div :title="title" v-text="title"> return { title: "我志愿加入中国共产党，拥护党的纲领，遵守党的章程，履行党员义务，执行党的决定，严守党的纪律，保守党的秘密，对党忠诚，积极工作，为共产主义奋斗终身，随时准备为党和人民牺牲一切，永不叛党。", }; } 

css

单行超出省略

.box { width: 100%; display: table; table-layout: fixed; div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } 

多行超出省略

.box { width: 100%; display: table; table-layout: fixed; div { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; } } 

注意：父级的样式一个属性也不能少。

overflow

w3school

overflow属性规定当内容溢出元素框时发生的事情。 这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承overflow属性的值。

MDN

overflow是CSS的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

display

w3school

display属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于HTML等文档类型，如果使用display不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。对于XML，由于XML没有内置的这种层次结构，所有display是绝对必要的。 CSS2中有值compact和marker，不过由于缺乏广泛的支持，已经从CSS2.1中去除了。

值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。(CSS2.1新增的值) list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS中有值compact，不过由于缺乏广泛支持，已经从CSS2.1中删除。 marker CSS中有值marker，不过由于缺乏广泛支持，已经从CSS2.1中删除。 table 此元素会作为块级表格来显示(类似)，表格前后带有换行符。 inline-table 此元素会作为内联表格来显示(类似)，表格前后没有换行符。)。)。 table-row-group 此元素会作为一个或多个行的分组来显示(类似 table-header-group 此元素会作为一个或多个行的分组来显示(类似)。 table-footer-group 此元素会作为一个或多个行的分组来显示(类似)。 table-row 此元素会作为一个表格行显示(类似 table-column-group 此元素会作为一个或多个列的分组来显示(类似)。 table-column 此元素会作为一个单元格列显示(类似） table-cell 此元素会作为一个表格单元格显示(类似 和 ) table-caption 此元素会作为一个表格标题显示(类似) inherit 规定应该从父元素继承display属性的值。

MDN

CSSdisplay属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。 形式上，display属性设置元素的内部和外部的显示类型。外部类型设置元素参与流式布局；内部类型设置子元素的布局。一些display值在它们自己的单独规范中完整定义；例如，在CSS弹性盒模型的规范中，定义了声明display: flex;时会发生的细节。