文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为float left div或list设置文本溢出省略号

为了在<div>或<li>元素中设置文本溢出省略号，您可以使用CSS的text-overflow属性。

代码语言：css
复制
.ellipsis {
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden;     /* 溢出的内容被隐藏 */
  text-overflow: ellipsis;/* 显示省略号 */
  width: 150px;          /* 需要设置的宽度 */
}

在HTML中，使用<p>或<span>包裹需要显示省略号的文本，并添加.ellipsis类名：

代码语言：html
复制
<p class="ellipsis">这是一段需要设置省略号的文本。</p>

这样，文本中的省略号将在<div>或<li>元素中显示。

相关搜索:如何使用css和html为输入元素设置正确的文本溢出省略号？如何在overflow设置为auto或scroll的情况下自动滚动(动画)带有文本的<div>？当我将背景大小设置为任何值，而不是覆盖div中的文本时，只要图像调整大小，就会溢出。我如何防止这种情况发生？地区选择 jsjs 字符编码js刷新当前页js 选择颜色js 点击消失js 调试工具js选中复选框
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

前段：可能是最全的 “文本溢出截断省略” 方案合集

，否则不显示省略号 加粗文字短板 需要 JS 实现，背离展示和行为相分离原则 文本为中英文混合时，省略号显示位置略有偏差 适用场景 适用于响应式截断，多行文本溢出省略的情况 Demo 当前仅适用于文本为中文...class='demo'> 复制代码 示例图片 再进阶一步，多行文本溢出省略（按高度） ○ 多行文本溢出不显示省略号 核心 CSS 语句 overflow: hidden...: 40px; （设定当前元素高度） ::after {} （设置省略号样式） 优点 无兼容问题 响应式截断 短板 无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号 省略号显示可能不会刚刚好，...: 20px；（结合元素高度,高度固定的情况下,设定行高, 控制显示行数） overflow: hidden；（文本溢出限定的宽度就隐藏内容） float: right/left；（利用元素浮动的特性实现...设置 A 盒子的高度与 B 盒子高度（或最大高度）要保持一致 当的 B 盒子高度低于 A 盒子，C 盒子仍会处于 B 盒子右下方。

2.3K40

前段：可能是最全的 “文本溢出截断省略” 方案合集

，否则不显示省略号 加粗文字短板 需要 JS 实现，背离展示和行为相分离原则 文本为中英文混合时，省略号显示位置略有偏差 适用场景 适用于响应式截断，多行文本溢出省略的情况 Demo 当前仅适用于文本为中文...class='demo'> 复制代码 示例图片 再进阶一步，多行文本溢出省略（按高度） ○ 多行文本溢出不显示省略号 核心 CSS 语句 overflow: hidden...: 40px; （设定当前元素高度） ::after {} （设置省略号样式） 优点 无兼容问题 响应式截断 短板 无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号 省略号显示可能不会刚刚好，...: 20px；（结合元素高度,高度固定的情况下,设定行高, 控制显示行数） overflow: hidden；（文本溢出限定的宽度就隐藏内容） float: right/left；（利用元素浮动的特性实现...设置 A 盒子的高度与 B 盒子高度（或最大高度）要保持一致 当的 B 盒子高度低于 A 盒子，C 盒子仍会处于 B 盒子右下方。

2.1K00

    • 可能是最全的 “文本溢出截断省略” 方案合集

    ○ 基于 JavaScript 的实现方案 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 需要 JS 实现，背离展示和行为相分离原则 文本为中英文混合时，省略号显示位置略有偏差...适用场景 适用于响应式截断，多行文本溢出省略的情况 Demo 当前仅适用于文本为中文，若文本中有英文，可自行修改 const text...{} （设置省略号样式） 优点 无兼容问题 响应式截断 短板 无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低...；（文本溢出限定的宽度就隐藏内容） float: right/left；（利用元素浮动的特性实现） position: relative；（根据自身位置移动省略号位置, 实现文本溢出显示省略号效果） word-break...设置 A 盒子的高度与 B 盒子高度（或最大高度）要保持一致 当 B 盒子高度低于 A 盒子，C 盒子仍会处于 B 盒子右下方。

    3.2K11

    可能是最全的 “文本溢出截断省略” 方案合集

    ○ 基于 JavaScript 的实现方案 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 需要 JS 实现，背离展示和行为相分离原则 文本为中英文混合时，省略号显示位置略有偏差...适用场景 适用于响应式截断，多行文本溢出省略的情况 Demo 当前仅适用于文本为中文，若文本中有英文，可自行修改 const text...{} （设置省略号样式） 优点 无兼容问题 响应式截断 短板 无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低...；（文本溢出限定的宽度就隐藏内容） float: right/left；（利用元素浮动的特性实现） position: relative；（根据自身位置移动省略号位置, 实现文本溢出显示省略号效果） word-break...设置 A 盒子的高度与 B 盒子高度（或最大高度）要保持一致 当 B 盒子高度低于 A 盒子，C 盒子仍会处于 B 盒子右下方。

    3.5K20

    文本溢出截断省略

    单行溢出省略 单行文本溢出截断省略直接使用CSS即可，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是只能作为单行文本溢出截断省略的解决方案。...*/ } 多行溢出省略 按行计算 CSS方案 多行文本溢出截断省略按行计算使用CSS，其文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是兼容性一般，line-clamp...: ellipsis; /* 文本溢出时显示省略符号 */ } 按行计算 Js方案 多行文本溢出截断省略按行计算使用Js，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号...，但是需要Js实现，背离展示和行为相分离原则，文本为中英文混合时，省略号显示位置略有偏差。...CSS，利用Float的浮动，通过::before与::after两个伪元素实现浮动操作，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，但省略号显示可能不会刚刚好，有时会遮住一半文字。

    1.7K10

    Css 实现多行文字截断

    -webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。...定位元素实现多行文本截断 另外还有一种靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现，实现方式如下： p { position: relative; line-height...回到事情的本质来看：我们希望 CSS 能够有一种属性，能够在文字溢出的情况下显示省略号，不溢出时不显示省略号(两种形式，两种效果)。...展示形式 基本原理就是这样，我们可以将浅蓝色区域想象成标题，黄色区域想象为省略号效果。..."; height: 20px; line-height: 20px; /* 为三个省略号的宽度 */ width: 3em; /* 使盒子不占位置 */ margin-left

    2.3K00

    CSS进阶内容——布局技巧和细节修饰

    表单文本对齐 图片底部空白问题 溢出文字采用省略号代替 CSS三角设计 我们在网页设计中常常看到三角形标志，而这些标志需要一些小技巧才能够完成 设计三角的要求： div盒子的高度和宽度均设计为0 我们通过...属性（推荐） 使图片转化为块级元素display：block； 溢出文字采用省略号代替 当我们的框架承受不住过多文字时，可能出溢出或者突然终止，这样的网页设计都是不合标准的 所以我们希望采用省略号来使整个文本不显得过于生硬...省略部分用省略号显示： text-overflow：ellipsis； 多行文本溢出：(方法过于复杂且兼容性不好，不推荐使用) 设置省略超出部分且让省略部分让省略号代替： overflow...-- 我们希望去除中间边框粗大的部分 --> ul>li { float: left; list-style:...-- 我们希望去除中间边框粗大的部分 --> ul>li { float: left; list-style:

    2K20

    翻译：如何使用CSS实现多行文本的省略号显示

    其中，-webkit-line-clamp设置块元素包含的文本行数；display: -webkit-box设置块元素的布局为伸缩布局；-webkit-box-orient设置伸缩项的布局方向；text-overflow...CSS实现多行文本溢出的省略号显示 我们把实现的细节划分为7个步骤，在这个实现过程中最简单的就是截断文本，而最难的部分则是让一个元素处在其父包含块溢出时的右下方，并且当父元素未溢出时该元素消失不可见。...; width: 100px; background: #FFA; } 2nd 模拟场景 我们通过创建一个子元素来替代将要显示的省略号，当文本溢出的情形下该元素显示在正确的位置上。...4th 削窄prop元素 目前，最左侧的prop元素的作用在于让realend元素在文本溢出时处在其正下方，在前几节的示例代码中为了直观的演示，设置prop元素的宽度为100px，那么现在为了更好的模拟实际的效果...由于CSS规范规定padding的值不可以为负数，因此只有设置margind-left为负值，且等于其宽度。

    2.8K60

    十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）

    的placeholder的字体样式 单行和多行文本超出省略号 负边距使用技巧 定位同时设置方位情况 相邻兄弟选择器之常用场景 outline属性的妙用技巧 隐藏滚动条或更改滚动条样式 纯CSS绘制三角形...单行和多行文本超出省略号」 // 单行文本出现省略号 width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap...负边距使用技巧」 ❝规律: 左为负时，是左移，右为负时，是左拉。...{ float:left; width: 20%; height: 300px; border-left:6px solid #fff; box-sizing:...隐藏文本的常用两种方法」 ❝text-indent: -9999px; 或者 font-size: 0; ❞ .logo { width: 190px; height: 80px; float

    62120

    overflow:hidden作用能治住塌陷_html溢出隐藏代码

    一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。... 效果如下： 一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。.../*只适用于单行文本*/ div{ width: 150px; background: skyblue; overflow: hidden; /*溢出隐藏*/...white-space: nowrap; /*规定文本不进行换行*/ text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/ } 效果如下： 二....当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。

    1.9K30

    前端知识点总结（html+css）（上）

    常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%； 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...（如div下可包含div） 行内元素（常见的行内元素a,span.img） 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签（如a标签内包含a标签） 行内块元素 行内块元素包含块级元素和行内元素的特征...自适应布局 两栏布局 左边左浮动，右边margin-left（float+margin） 左元素float:left 右边父元素BFC（float+BFC） 左元素绝对定位，left:0...溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记...: hidden; -webkit-box-orient: vertical; //（设置对齐模式） text-overflow: ellipsis //（以用来多行文本的情况下，用省略号“…”

    33711

    前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素的显示与隐藏…

    相对定位以 自己在标准流位置的左上角为基点 + 边偏移属性，定位元素新的位置 */ position: relative; left: 300px; top: 300px;...display 显示 display:none 隐藏对象与它相反的是display:block除了转换为块元素之外，同时还有显示元素的意思 特点：隐藏之后，不在保留位置 visibility 可见性 设置或检索是否显示对象...class="box"> 复制代码 溢出的文字隐藏 显示三个 小点 white-space 设置或检索对象内文本显示方式通常我们使用于强制一行显示内容...normal：默认处理方式 nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行 text-overflow:ellipsis; 显示省略号 谨记想让文字后面实现三个小点点一定要...ellipsis 文本隐藏的移除显示省略号 clip 不显示省略号*/ text-overflow: ellipsis; } <div

    3.5K20

    第141天：前端开发中浏览器兼容性问题总结（二）

    7文本居中，嵌套的块元素也会居中 ff /opera /safari /ie8文本会居中，嵌套块不会居中 解决： 块元素设置 1、margin-left:auto;margin-right:auto 2...IE中li指定高度后，出现排版错误 问题： 在ie下如果为li指定高度可能会出现排版错位 解决：        设置line-height 23. ul或li浮动后，显示在div外 问题： div中的ul...或li设置float以后，都不在div中 解决： 必须在ul标签后加来闭合外层div 24. ul浮动后，margin变大 问题： ul设置 ...IE6-7 列表背景颜色失效的问题2 问题： 做横向导航栏时，ul设置为float且有背景色，li设置为float。...(其中floatA、floatB的属性已经设置为float:left;)   这段代码在IE中毫无问题，问题出在其他浏览器中。原因是NOTfloatC并非float标签，必须将float标签闭合。

    1.9K21
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券