CSS实现文本显示两行

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

效果图

CSS实现文本显示两行

text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -moz-box;
      -moz-line-clamp: 2;
      -moz-box-orient: vertical;
      overflow-wrap: break-word;
      word-break: break-all;
      white-space: normal;
      overflow: hidden;
  • text-overflow

CSS 属性确定如何向用户发出未显示的溢出内容信号.它可以被剪切,显示一个省略号(‘…’)或显示一个自定义字符串.

  • -webkit-line-clamp

CSS 属性 可以把 块容器 中的内容限制为指定的行数.
它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果
在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).
当他应用于锚(anchor)元素时,截取动作可以发生在文本中间,而不必在末尾.

  • overflow

CSS 属性-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。与word-break相比,overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

注:word-wrap** 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。**

  • white-space

CSS 属性是用来设置如何处理元素中的 空白 (en-US)。文章来源地址https://www.toymoban.com/news/detail-441493.html

.pay_row_1{
      padding: 5px;
      height: auto;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -moz-box;
      -moz-line-clamp: 2;
      -moz-box-orient: vertical;
      overflow-wrap: break-word;
      word-break: break-all;
      white-space: normal;
      overflow: hidden;
    }
 <div class="pay_row_1">
        <span class="tag_txt">京东贴息</span>
        <span class="pay_title">{{item}}</span>
      </div>

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

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

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

相关文章

  • 小程序自定义底部导航 custom-tab-bar完整实现代码附效果图

    根据用户身份,动态设置底部的导航图标  实现步骤: 第一步 ,先配置:app.json里面的 tabBar 的 custom 设置为 true,如图:这里需要注意的是,自定义 tabBar 中包含的页面,在这里的 list 页面路径也必须得有,其它字段可以不设置 相关代码:   第二步 ,创建组件:在项目跟目

    2024年02月15日
    浏览(53)
  • 基于python天津二手房数据爬虫采集系统设计与实现(django框架)带效果图

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月03日
    浏览(52)
  • 20230514-SmartChat测试效果图

    E:20230514-SmartChat测试效果图 您好,我是SmartChat,新生代智能机器人,通过运用自然语言处理、机器学习和人工智能等高精尖技术,可以与您进行自然、流畅、有趣的对话,帮助您获取所需的信息和服务。无论您想要写商业计划书、营销策划,还是写作文、写周报、解数学题等

    2024年02月04日
    浏览(64)
  • 3d建模渲染效果图步骤

    3dmax效果图的制作流程主要包括建模、渲染设置、灯光、材质贴图、摄影机和环境、渲染6大步骤。 在3dmax中想要制作出效果图,首先需要在场景中制作出3D模型,这个过程就叫做“建模”。建模有很多方式,比如通过3dmax内置的几何体创建立方体、球体等常见几何形体,利用多

    2024年02月09日
    浏览(45)
  • Vray渲染效果图材质参数设置

    渲染是创造出引人入胜视觉效果的关键步骤,在视觉艺术领域尤为重要。不过,渲染作为一个资源密集型的过程,每当面对它时,我们往往都会遭遇到时间消耗和资源利用的巨大挑战。幸运的是,有几种方法能够帮助我们优化渲染,使之既高效又经济。例如,通过掌握一些渲

    2024年01月20日
    浏览(65)
  • AIGC 360全景图 效果图材质替换

    首先感叹一下AIGC的效果,如下图所示 AUTOMATIC1111 WebUI Prompts Positive and Negative提示词 LoRa 插件 LoRa: LatentLabs360 on CivitAI ControlNet 插件 Deep-checkpoints模型文件地址 Lora-Script 训练脚本 Panorama-Viewer查看全景图插件 网络问题自己搭梯子,一些安装环境可以调整(gradio==3.16.2) 感谢 秋葉

    2024年02月09日
    浏览(55)
  • 利用ArcGIS Pro制作三维效果图

    1、新建工程 打开Arcgispro,新建工程,这里我们要用到的模板为全局场景。 这里添加的数据需要有一个字段内容是数值的,这个字段也是接下来要进行拉伸的字段。 3、高度拉伸 数据添加进来后,如下图所示,这时图层处于2D图层里。 这时我们点中该图层,回到菜单栏,点击

    2024年02月16日
    浏览(58)
  • 数据可视化:随时间变化的效果图

    获取北京、上海、江苏、广东四省的2008—2012年的GDP数据 在Jupyter Notebook上实现代码如下:

    2023年04月12日
    浏览(49)
  • 炫云云渲染3ds max效果图渲染教程

    很多人在第一次使用炫云云渲染渲染效果图的时候不知道怎么使用,其实现在使用炫云渲染效果图真的很简单,我们一起来看看。 一客户端安装 1、打开炫云云渲染官网,点击右上角的客户端下载,选择炫云客户端(NEXT版),进入下载页面下载客户端。 2、客户端下载下来后

    2024年02月07日
    浏览(46)
  • uniapp图片放大缩小预览,并支持图片拖动附效果图

    效果图: 放大缩小和拖动是根据 movable-area 组件来实现的,小程序和uniapp都支持这个组件。 movable-area | 微信开放文档 微信开发者平台文档 https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html 实现思路: 默认显示默认大小的图片,点击图片执行yulan事件从而显示放大缩

    2024年02月11日
    浏览(56)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包