固定宽度时，实现字数超出时变成省略号及动态改变css样式

4.28

一、固定宽度时，实现字数超出时变成省略号

①不折叠

white-space: nowrap;

②超出部分隐藏

overflow: hidden

③用省略号表示

text-overflow: ellipsis;

二、如何动态改变css样式

<button>改变背景颜色</button>

*{margin: 0; padding: 0;}
			.bg{
				margin: 0 auto;
				width: 500px;
				height: 300px;
				background-color: red;
				line-height: 300px;
				text-align: center;
			}
			button{
				text-align: center;
				width: 100px;
			}

③找到需要改变背景颜色的容器

<script type="text/javascript">
			function hello() {
				//				找到需要改变背景颜色的容器
				let divs = document.getElementsByClassName("bg")

				if(divs[0].className == "blue") {
					divs[0].className = "bg"
				} else {
					divs[0].className = "blue"
				}

			}
		</script>

button 行内块 可以设置大小但不换行