常用css让文本内容在固定宽高的div内居中多行文本溢出显示省略号单行文本超出溢出

让文本内容在固定宽高的div内居中

适用情况:

div固定宽高，当文本内容少时（文本内容撑起的高度小于div的高度）可以垂直居中显示。内容多的时候（文本内容撑起的高度大于div的高度）出现滚动条，并且从div第一排开始显示。

<body>
    <section>
        <div>english ee eeeeeeee</div>
    </section>
</body>

<style>
  section{
    width: 200px;
    height: 100px;
    border: 1px solid lightgray;
    position: relative;
  }
  section div{
    position: absolute;
    width: 100%;
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
    word-wrap: break-word;
    text-indent: 20px;
    overflow-y: auto;
  }
</style>

多行文本溢出显示省略号

<style>
    div{
        width: 200px;
        border: 1px solid #000;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;/* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-line-clamp: 2;/* 限制在一个块元素显示的文本的行数 */
        -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式 */
    }
</style>

单行文本超出溢出

<style>
    div{
        width: 65px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }