html 元素内容溢出省略号显示

元素溢出打点显示

• 在页面中我们有时会遇到文本太长又不想让它换行显示 我们就可以用这种方法让页面更加好看

css样式：

  div {
            width: 200px;
            height: 200px;
            border: 1px solid black;

            /* 元素溢出内容  隐藏 */
            overflow: hidden;

            /* 设置文本不折行 */
            white-space: nowrap;
            /* 元素溢出打点 */
            text-overflow: ellipsis;
        }

html部分

<div>《致橡树》　　我如果爱你——　　绝不像攀援的凌霄花，　　借你的高枝炫耀自己：　　我如果爱你——　　绝不学痴情的鸟儿，　　为绿荫重复单调的歌曲；　　也不止像泉源，　　常年送来清凉的慰籍；　　也不止像险峰，增加你的高度，衬托你的威仪。　　甚至日光。　　甚至春雨。　　不，这些都还不够！　　我必须是你近旁的一株木棉，　　做为树的形象和你站在一起。　　根，紧握在地下，　　叶，相触在云里。　　每一阵风过，　　我们都互相致意，　　但没有人　　听懂我们的言语。　　你有你的铜枝铁干，　　像刀，像剑，　　也像戟，　　我有我的红硕花朵，　　像沉重的叹息，　　又像英勇的火炬，　　我们分担寒潮、风雷、霹雳；　　我们共享雾霭流岚、虹霓，　　仿佛永远分离，　　却又终身相依，　　这才是伟大的爱情，　　坚贞就在这里：　　不仅爱你伟岸的身躯，
也爱你坚持的位置，脚下的土地。div>

overflow方法

1. overflow: hidden; //元素溢出内容 隐藏

2. overflow: scroll; //元素溢出 滚动显示

3. overflow-x: scroll; //横向滚动

4. overflow-y: scroll; //纵向滚动

5. overflow:hidden //超出部分会直接修剪掉