css使用三个属性设置文本结尾省略号显示

三个css属性设置文本内容超出部分，省略号显示

---

前言

本篇文章主要记录了css样式设置文本超出部分省略号显示，适用于input标签和普通标签文本内容超出部分省略号显示。

---

一、哪三个属性

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

二、具体属性用法

overflow属性的使用：
特点：必须给块级容器指定高度，或者使用不换行属性让内容变宽
属性值：

• visible：默认值。
• hidden：内容会被修剪，浏览器会显示滚动条。
• scroll：由浏览器定夺，如果内容被修剪，会显示滚动条。
• auto：规定从父元素集成overflow属性的值。

white-space属性的使用： 处理元素中的空白
属性值：常用

• normal：文字换行。
• nowrap：文字不换行。

text-overflow属性的使用：
特点：该属性不会强制发生溢出，要是文本溢出其容器，必须设置overflow和white-space
属性值：

• clip：默认值，换行。
• ellipsis：显示一个‘…’来表示剪切文本

三、使用

<style>
	div{
    
    
		white-space:nowrap; 
		width:100px; 
		overflow:hidden; 
		border:1px solid #000000;
	}
</style>

<div style="text-overflow:ellipsis;">
	this is test text 'overflow:ellipsis'
</div>
<input style="text-overflow:ellipsis;" value="this is test text overflow:ellipsis"/>

运行示例：

总结

如有问题欢迎指出，互相学习。