1.文本溢出隐藏 2.万能清除浮动实例

程序员文章站 2022-04-22 14:01:48

...

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="css/style.css" rel="stylesheet"> -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box-content {
        width: 90%;
        min-width: 1100px;
        margin: 0 auto;
      }
      .box-main {
        width: 33%;
        height: 200px;
        background-color: red;
      }
      .box-l {
        float: left;
      }
      .box-r {
        float: right;
      }
      .box-c {
        margin: 0 auto;
        margin: 0 6px;
      }
      .clear:after {
        clear: both;
        content: " ";
        display: block;
        height: 0;
        overflow: hidden;
        visibility: hidden;
      }
      .box-after {
        width: 90%;
        height: 100px;
        background-color: orange;
        margin: 0 auto;
      }
      .box-c {
        background-color: blue;
      }
      /* 一行显示 */
      .box-c p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /* 俩行显示 */
      .liahang {
        background-color: pink;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }
    </style>
</head>
<body>
<div>
  <!-- 清除浮动案例 -->
  <div class="box-content clear">
    <div class="box-l box-main"></div>
    <div class="box-c box-l  box-main">
      <p class="yihang">强制一行显示强制一行显示强制一行显示强制一行显示强制一行显示强制一行显示强制一行显示强制一行显示强制一行显示</p>
    </div>
    <div class="box-r box-main"></div>
  </div>
  <div class="box-after">


  </div>
  <div class="box-content clear">
    <div class="box-l box-main"></div>
    <div class="box-c box-l  box-main"></div>
    <div class="box-r box-main"></div>
  </div>
  <div  style="background-color: aqua;width: 90%;height: 700px;margin: 10px auto;">
    <div class="box-l box-main"></div>
    <div class="box-c box-l  box-main">
      <div class="liahang">强制文字俩行显示强制文字俩行显示强制文字俩行显示强制文字俩行显示强制文字俩行显示强制文字俩行显示强制文字俩行显示强制文字俩行显示强制文字俩行显示</div>
    </div>
    <div class="box-r box-main"></div>
  </div>
</div>
</body>
</html>

直接复制粘贴即可使用
文本超出部分一行显示关键代码

      /* 一行显示 */
      .box-c p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

文本超出俩行显示

      /* 俩行显示 */
      .liahang {
        background-color: pink;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }

万能清除浮动的方法

      .box-after {
        width: 90%;
        height: 100px;
        background-color: orange;
        margin: 0 auto;
      }

相关标签：清除浮动文本超出隐藏 css

上一篇： css设置文字超出显示省略号

下一篇： css处理超出指定数的文字的时候剩下的变成省略号