文字超出隐藏

  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>

文字超出隐藏_第1张图片

 

你可能感兴趣的:(文字超出隐藏)