css文本溢出处理

这篇具有很好参考价值的文章主要介绍了css文本溢出处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本溢出处理</title>
    <style>
      .sing-line {
        border: 2px solid black;
        width: 200px;
        height: 30px;
        line-height: 30px;
        margin-bottom: 90px;
        color: #f40;
        /* 强制不换行 */
        white-space: nowrap;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 文本溢出省略号 */
        text-overflow: ellipsis;
      }
      .multi-line {
        border: 2px solid black;
        width: 200px;
        height: 150px;
        line-height: 30px;
        /* 改变盒子 存在兼容性问题 */
        display: -webkit-box;
        /* 排列方向 */
        -webkit-box-orient: vertical;
        /* 设置显示几行 */
        -webkit-line-clamp: 3;
        overflow: hidden;
      }

      /* 多行文本溢出无兼容性问题实现 */
      .container {
        height: 140px;
        width: 400px;
        padding: 20px;
        background: #ccc;
        overflow: hidden;
      }
      .text-container {
        height: 100px;
        overflow: hidden;
      }
      .content {
        line-height: 25px;
        margin-top: -80px;
      }
      .more {
        float: right;
        /* 设置行高为 相对于字体大小的倍数, 1是使用浏览器默认行高 */
        line-height: 1;
      }
      .text-container::before {
        content: "";
        display: block;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <!-- 单行文本 -->
    <p class="sing-line">
      This is a single line of text This is a single line of text This is a
      single
    </p>
    <!-- 多行文本 -->
    <p class="multi-line">
      This is a multi line of text This is a multi line of text This is a Thisis
      a multi line of text This is a, This is a
    </p>
    <div class="container">
      <div class="text-container">
        <div class="more">...</div>
        <div class="content">
          This is a multi line of text This is a multi line of text This is a
          Thisis a multi line of text This is a multi line of text This is a
          multi line of text This is a Thisis a multi line of text This is a
          multi line of text This is a multi line of text This is a Thisis a
          multi line of text This is a multi line of text This is a multi line
          of text This is a Thisis a multi line of text This is a multi line of
          text This is a multi line of text This is a Thisis a multi line of
          text This is a multi line of text This is a multi line of text This is
          a Thisis a multi line of text This is a multi line of text This is a
          multi line of text This is a Thisis a multi line of text This is a
          multi line of text This is a multi line of text This is a Thisis a
          multi line of text
        </div>
      </div>
    </div>
  </body>
</html>

css文本溢出处理,css,前端,html文章来源地址https://www.toymoban.com/news/detail-824179.html

到了这里,关于css文本溢出处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS中如何实现多行文本溢出省略号效果?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月10日
    浏览(51)
  • CSS实现单行或者多行文本溢出隐藏并且显示省略号

    如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行; 详细步骤: 第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略) 第二步(溢出隐藏)overflow:hidden; 第三步(文本溢出显示省略号)text-overf

    2024年02月16日
    浏览(51)
  • H5+Css3文本溢出添加省略号(包括插件)

    局限性: 使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clamp 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。超出必须隐藏。 将height设置为line-height的整数倍,防

    2024年02月07日
    浏览(56)
  • CSS3技巧33:妙用文本溢出text-overflow

    text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(没什么浏览器支持)。 ellipsis :显示省略符号 ... 来代表被修剪的文本。 clip:剪切文本。 string:自定义字符串来代表修剪的文本。不是所

    2023年04月09日
    浏览(32)
  • [HTML]Web前端开发技术2(HTML5、CSS3、JavaScript )格式化文本标记,定义列表,<blockquote>,definition description,ruby——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,大大会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 格式化文字与段落 Web页面设计原则 向Web页面添加文字信息 格式化文本标记 标题字标记 添加空格与特

    2024年02月05日
    浏览(93)
  • 使用overflow实现多行文本的溢出部分处理

    测试结果

    2024年02月12日
    浏览(40)
  • CSS笔记——font、line-height知识点及图片间隙、文本溢出等解决方案

    font-family(字体族 ):指定字体的名称或类别。可以指定多个字体族,用逗号分隔,浏览器会按照指定的顺序依次寻找可用字体。可取值: 字体名称:如\\\"Arial\\\"、\\\"Times New Roman\\\"等。 通用字体系列:如\\\"serif\\\"、“sans-serif”、\\\"monospace\\\"等。 自定义字体系列:如\\\"myFont, Arial, sans-serif

    2024年02月07日
    浏览(51)
  • vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑

    先找个目录创建一个vue项目 例如 我们想要项目叫 editor 在终端执行 2和3其实都可以 但个人建议 最近还是2会更稳定一些 在终端执行 引入依赖包 然后在项目src目录下创建 utils 文件夹 里面创建一个setting.js 参考代码如下 然后 这边 调用组件的代码 因为项目也刚创 我直接写 s

    2024年02月15日
    浏览(52)
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 (Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释: border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。 box-shadow:创建一个元

    2024年02月08日
    浏览(50)
  • Css Flex 弹性布局中的换行与溢出处理方法

    Css Flex 弹性布局中的换行与溢出处理方法 CSS弹性布局(Flex)是CSS3中的一种新的布局方式,它能够帮助我们更加灵活地布局元素。在Flex弹性布局中,元素的布局仅依赖于父容器的设置,而不再需要复杂的相对或绝对定位。本文将详细介绍Flex布局中的换行与溢出处理方法,并

    2024年02月07日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包