溢出文本text-overflow的使用问题

最新推荐文章于 2023-02-23 16:54:26 发布
最新推荐文章于 2023-02-23 16:54:26 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/machunmei2/article/details/21243665
版权

今天，学习 溢出文本text-overflow的时候，犯了一个错误，特此记录。

text-overflow有两个属性值，clip和ellipsis。clip 表示不显示省略标记（…），而是简单的裁切；ellipsis代表当对象内文本溢出时显示省略标记（…）

需要注意的是，要想这两个属性起真正的作用，需要配合overflow:hidden;white-space:nowrap;使用。

overflow:hidden;代表着超出文本的部分不显示

white-space:nowrap;代表强制文本在一行显示。


我写的例子代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>溢出文本text-overflow例子</title>
  <meta name="Generator" content="EditPlus" charset="UTF-8">
</head>
 <body>
<div style="text-overflow:clip;overflow:hidden;white-space:nowrap;width:200px;background-color:yellow;">
不显示省略标记，而是简单的裁切
</div>
<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:200px;background-color:red;">
显示省略标记，不是简单的裁切
</div>
 </body>
</html>

结果：



如果overflow:hidden;不写，结果是这样的：


如果white-space:nowrap;不写，结果是这样的：


爱吃的胖子要减肥
关注
专栏目录
文本溢出隐藏
_____青絲
04-17 165
单行 p1{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 多行 ps：只兼容了谷歌//ios可能异常 .p1{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3;...
CSS 文本溢出 —— overflow
白菜执笔人的博客
10-21 556
Web前端基础 学习笔记 CSS 文本溢出 - overflow 使用 verflow 属性：定义溢出元素内容区的内容会如何处理 语法： { overflow: visible / hidden / scroll / auto / inherit; } 说明: visible: 默认值，内容不会被修剪，会出现在元素框之外； hidden: 内容会被修剪,并且其余内容是不可见的； scroll...
CSS中的text-overflow属性详解 （控制文字在一行显示，超出部分加省略号）
热门推荐
zzzley的博客
02-23 1万+
在上面的代码中，我们将文本内容放在一个200像素宽的容器中，并设置text-overflow为ellipsis（表示使用省略号来处理文本内容的溢出），white-space为nowrap（表示不允许文本进行换行），overflow为hidden（表示当文本内容超出容器宽度时，隐藏超出部分）。其中，white-space属性用于控制文本如何进行换行，而overflow属性用于控制当文本内容超出容器限定宽度时的显示方式。这时候，就需要使用text-overflow属性来处理文本内容的溢出问题。
文本溢出的部分解决办法
AS_TS的博客
06-11 1727
1. 单行文本溢出 1.1 单行文本溢出省略 核心 CSS 语句 overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行） text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 省略号位置显示刚好 短板 只支持单行文本截断 适用场景 适用于单行文本溢出显示省略号的情况 示例图片
关于文本溢出
qq_42042927的博客
04-26 377
受网页布局空间的影响，很多时候在有限的空间内并不能完全显示所有的内容，而当实际内容超出实际存放的时候，就是溢出。此时，需要对溢出的内容做相应的处理。我们经常能在网页中看到一段文字过长出现省略号的效果其中多行文本只能通过JS实现，而单行文本可直接通过CSS代码实现以下示例即为单行文本实现省略效果的说明首先我们需要4个属性配合使用：1、width:200px;设置宽度，文本超出多少猜隐藏2、white...
溢出文本text-overflow的使用问题分析及解决
09-25
这个属性阻止文本换行，强制所有文本都在同一行内显示，这样溢出的文本才会出现在同一行并触发text-overflow效果。 让我们通过一个例子来具体看看效果。假设有两个div元素，它们都设置了固定的宽度和背景色。第一个...
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
09-25
总的来说，利用CSS的 `text-overflow: ellipsis` 以及相关的 `white-space` 和 `overflow` 属性，我们可以轻松地在不使用JavaScript的情况下实现文本溢出时的省略号显示，提高网页的性能和用户体验。同时，对于多行...
CSS属性text-overflow的使用问题
11-21
总结来说，`text-overflow`、`overflow`和`white-space`是CSS中处理文本溢出问题的关键属性，它们共同协作，使我们可以优雅地处理那些无法完全在容器内显示的文本，提供更好的用户体验。在网页设计和开发中，理解和...
文本溢出行数属性
咸鱼夏天的博客
06-05 318
display:webkit-box; text-overflow:ellipsis; webkit-line-clamp:2;
CSS小技巧--单行文本溢出和多行文本溢出
weixin_34245749的博客
05-18 253
单行文本溢出省略号 核心代码就三行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 复制代码demo: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin...
text-overflow简单使用
dexia7362的博客
12-16 118
text-overflow属性配合overflow才有效果，还记得把文字强制一行显示，如下代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>text-overflow</title> <m...
php text 溢出,图文详解CSS文本溢出显示省略号效果（text-overflow）
weixin_36221149的博客
03-24 252
在工作中经常会遇到文本溢出，需要显示省略号的情况，那这个省略号是怎么实现的呢？这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号。对CSS文字溢出加省略号这个知识不熟悉的小伙伴可以参考一下，希望可以帮助到你！text-overflow属性表示当文本超出包含它的元素时，超出部分应该如何显示。写法：text-overflow ： clip | ellipsis属性值描述...
SVG之text
weixin_34195364的博客
05-04 503
svg里输入文本用<text>元素 <text>基本属性 x,y stroke,fill font styles (x,y)用于指定文字起始位置。准确的说，x指定文字最左侧坐标位置，y指定文字baseline所处y轴位置。fill的默认为black，stroke默认为none。如果设置了stroke，字的边缘会...
web知识笔记
szb0312的博客
09-07 234
web笔记
06CSS文本——text-overflow
Blog of Lytracy
09-30 500
文本框经常会出现文本溢出的情况，在只有单行文本框，文本又出现溢出的情况，这时候就需要 text-overflow 来处理这些溢出的文本了。text-overflow 有三个取值： clip ：修剪文本。 ellipsis ：显示省略符号来代替被修剪的文本。 string ：使用给定的字符串来代替被修剪的文本。 <head> <meta charset="UTF-8"> <title>Title</title> <style t
CSS中的text-overflow:clip|ellipsis的使用
liudanyang_21的博客
07-22 1620
如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...,可以使用text-overflow:clip|ellipsis 基本语法：text-overflow : clip | ellipsis 若为text-overflow:clip 取默认值，不显示省略标记(...)，而是简单的裁切 若为text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) 例如： ...
深入理解CSS溢出overflow
weixin_33950035的博客
03-18 1063
前面的话 　　当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况   定义 overflow溢出 　　值: visible | hidden | scroll | auto | inherit 　　初始值: visible 　　应用于: 块级元素、替换元素、表单元格 　　继承性: 无 　　[注意]除了IE7-浏览器外，其他浏览器...
svg中如何让文本溢出时显示省略号
xm2by的博客
11-27 5327
svg中如何让文本溢出时显示省略号 最近在使用d3.js实现一个树状组织结构图，遇到如下图所示的问题，要求是文本内容固宽，溢出内容应用省略号代替，如果是使用普通html标签实现的话，是比较简单的，overflow: hidden; text-overflow: ellipsis; white-space: nowrap;即可，但是在使用svg标签进行作图时，将这些css属性应用到<text&...
CSS 文本溢出 text-overflow属性
weixin_41866717的博客
07-17 2169
text-overflow属性用来设置容器内的文本溢出时，如何处理溢出的内容，取值为 clip | ellipsis，默认值为 clip。 clip 表示文本溢出时，简单的把溢出的部分裁剪掉；ellipsis 表示文本溢出时，在溢出的地方显示一个省略标记（…）。 在使用 text-overflow属性时，一定要给容器定义宽度，否则，文本只会撑开容器，而不会溢出。 事实上，text-overflow属性只能定义文本溢出时的效果，并不具备其它样式功能。所以，无论 text-overflow属性取值是 clip，
text-overflow: ellipsis失效
最新发布
12-28
如果容器没有设置固定的宽度或高度，文本就不会溢出，因此text-overflow: ellipsis也就无法生效。 2. 容器的overflow属性不是hidden或scroll：text-overflow: ellipsis需要和overflow属性配合使用。如果容器的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值