1.单行文字
<html><head><meta charset="utf-8"><style>#row{display: block;/* 必备的四个条件 */width:100px;/*宽度 */overflow: hidden;/*超出隐藏*/white-space: nowrap;/* 强制不换行 */text-overflow:ellipsis;/*文字隐藏的格式 */}</style></head><body><span id="row">单行文字超出隐藏的方式</span></body> </html>

2.多行文字超出隐藏,这种主要用于移动端。
<html><head><meta charset="utf-8"><style>h2{width: 100px;/* 多行超出省略的必备条件 */display: -webkit-box;/* 弹性盒模型 */-webkit-box-orient: vertical;/* 元素垂直居中*/-webkit-line-clamp: 3;/* 文字显示的行数*/overflow:hidden;/* 超出隐藏 */}</style></head><body><h2>多行文字隐藏的方式,凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数</h2></body> </html>


















