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

---

1、html

<div class="box">
	<div :title="title" v-text="title"></div>
</div>

---

2、JavaScript

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

---

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

---

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