CSS设置文本不换行多余文字显示省略号

9月前作者：小刘前端分类：Toy博客阅读(38) 违法举报

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

文章目录

一、使用步骤

一、使用步骤

1.文字单行不换行多余文字显示省略号

代码如下（示例）：

      white-space: nowrap;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;

2.文字多行不换行多余文字显示省略号

代码如下（示例）：文章来源地址https://www.toymoban.com/news/detail-531057.html

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;//行数

到了这里，关于CSS设置文本不换行多余文字显示省略号的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

分享到：

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

css单行文本溢出显示省略号

可以使用CSS中的 text-overflow 属性来实现单行文本溢出显示省略号。具体实现步骤如下：首先，将需要显示省略号的元素的宽度设置为固定值或最大宽度。接着，使用 white-space 属性将元素的文本内容强制放在一行中，防止换行。然后，使用 overflow 属性将超出元素宽度的文本

2024年02月11日
浏览(41)
微信小程序——CSS限制文字宽度和行数（溢出显示省略号）

知识专栏专栏链接微信小程序专栏 https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 Git版本管理 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 监听页面滑动 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 判断用户上滑还是下滑 https://blog

2024年02月10日
浏览(62)
css文本超长显示省略号，鼠标hover省略号展示全部内容

有时候我们会发现鼠标hover到文字省略号上，会展示出全部内容，效果如下：首先，文字过长展示省略号再借助鼠标悬停标签展示其 title 内容的特性，为标签加上 title属性，实现我们想要的效果有关 title 属性的介绍：

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

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

2024年02月16日
浏览(50)
css三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示，常见布局技巧

目录 3.CSS三角 4.CSS 用户界面样式 4.1什么是界面样式 4.2轮廓线 outline 4.3 防止拖拽文本域 resize 5.vertical-align 属性 5.1图片,表单都属于行内块元素，默认的vertical-align 是基线对齐。 5.2解决图片底部默认空白缝隙问题 6.溢出的文字省略号显示 1.单行文本溢出显示省略号--必须

2023年04月09日
浏览(46)
微信小程序 text view .... 文字不换行，自动隐藏超出内容

text-overflow: ellipsis; 文字内容溢出后加上省略点。 overflow: hidden; 控件内容溢出后直接隐藏 white-space: nowrap; 文本不会换行，文本会在在同一行上继续。 text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (…) 或显示自定义

2024年02月11日
浏览(47)
逻辑(css3)_强制不换行

需求如上图做一个跑马灯数据，时间、地点、姓名、提示文本字数都不是固定的。逻辑思想个人想法是给四个文本均设置宽度，不然会出现不能左对齐的现象。此时四个文本均左对齐，垂直排列样式也比较好看，但是出现一个缺点：某些手机屏幕上会折行。此时可以

2024年02月06日
浏览(36)
微信小程序 - 修改多行文本输入框 placeholder 属性换行显示文字样式的详细教程

多行文本输入框是微信小程序中常用的组件之一，而placeholder属性则用于在输入框中显示提示文本。然而，默认情况下，placeholder属性中的文字无法实现换行显示，这可能会导致在一些情况下显示不完整或不够明确。在本篇教程中，我将详细介绍如何修改多行文本输入框的pl

2024年02月03日
浏览(45)
使用js控制文字大小自动适应div不换行，div中文字字号自动调整大小以适应固定宽度

2024年02月09日
浏览(54)
$【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行$

【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行

最近开发vue2 项目，接口返回的是类似于这样的数据：我是第一行的哦n我是第二行的哦我是直接这样渲染的，但结果却是不如意，变成了下面这样 1.在使用 v-html 时添加样式，white-space:pre-wrap ,让浏览器保留空白和换行符。 2、用 pre 标签包裹被包围在 pre 标签中的文本通常

2024年02月14日
浏览(36)