单行文本|多行文本（中文）溢出显示...（css解决）

最新推荐文章于 2024-09-27 11:01:06 发布

weixin_43677787

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量92

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_43677787/article/details/122486292

版权

1.单行文本

/*css*/
.box {
      width: 200px;
      height: auto;
      border: 3px solid red;
      padding: 10px;
      /* 单行文本 */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  /*html*/
  <div class="box">
    我是文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。
  </div>

效果：在这里插入图片描述 2.1.多行行文本`

/*css*/
.box {
      width: 200px;
      border: 3px solid red;
      /* 多行行文本 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      /*方向*/
      -webkit-line-clamp: 3;
      /*显示几行*/
      overflow: hidden;
      text-overflow: ellipsis;
    }
  /*html*/
  <div class="box">
    我是文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。
  </div>