web不设置宽度实现超出隐藏display: tabletable-layout: fixedwhite-space: nowraptext-overflow: ellipsis

Posted 2022-06-16 web半晨

目录

• 1、html
• 2、JavaScript
• 3、css

---

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;
	

---

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