text-overflow样式属性值ellipsis的使用方法

最新推荐文章于 2023-08-05 09:27:14 发布
最新推荐文章于 2023-08-05 09:27:14 发布
阅读量497 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreqwqr/article/details/39234799
版权
一、div标签中使用text-overflow样式属性值ellipsis的方法：

[html] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>div标签中使用text-overflow样式属性值ellipsis的方法</title>
  5.         <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
  6.     </head>
  7.  
  8.     <body>
  9.         <divstyle="width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid #336699;">有志气者不会甘居下游，有见识者不敢自满自足，有恒心者断无不成之事！</div>
  10.     </body>
  11. </html>
[html] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.     <head> 
  4.         <title>div标签中使用text-overflow样式属性值ellipsis的方法</title> 
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
  6.     </head> 
  7.  
  8.     <body> 
  9.         <div style="width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid #336699;">有志气者不会甘居下游，有见识者不敢自满自足，有恒心者断无不成之事！</div> 
  10.     </body> 
  11. </html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>div标签中使用text-overflow样式属性值ellipsis的方法</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	</head>

	<body>
		<div style="width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid #336699;">有志气者不会甘居下游，有见识者不敢自满自足，有恒心者断无不成之事！</div>
 	</body>
</html>

        二、table标签子标签td标签中使用text-overflow样式属性值ellipsis的方法：

[html] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>table标签子标签td标签中使用text-overflow样式属性值ellipsis的方法</title>
  5.         <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
  6.     </head>
  7.  
  8.     <body>
  9.         <tablecellSpacing="0"cellpadding="1"width="456"border="1"style="table-layout:fixed;">
  10.             <tr>
  11.                 <tdstyle="text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:2px;">有志气者不会甘居下游，有见识者不敢自满自足，有恒心者断无不成之事！</td>
  12.             </tr>
  13.         </table>
  14.     </body>
  15. </html>
[html] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.     <head> 
  4.         <title>table标签子标签td标签中使用text-overflow样式属性值ellipsis的方法</title> 
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
  6.     </head> 
  7.  
  8.     <body> 
  9.         <table cellSpacing="0" cellpadding="1" width="456" border="1" style="table-layout:fixed;"> 
  10.             <tr> 
  11.                 <td style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:2px;">有志气者不会甘居下游，有见识者不敢自满自足，有恒心者断无不成之事！</td> 
  12.             </tr> 
  13.         </table> 
  14.     </body> 
  15. </html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>table标签子标签td标签中使用text-overflow样式属性值ellipsis的方法</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	</head>

	<body>
		<table cellSpacing="0" cellpadding="1" width="456" border="1" style="table-layout:fixed;">
			<tr>
				<td style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:2px;">有志气者不会甘居下游，有见识者不敢自满自足，有恒心者断无不成之事！</td>
			</tr>
		</table>
 	</body>
</html>

        说明：代码二中的例子在某些浏览器（比如：Opera浏览器）中是达不到相应的效果的。

dreqwqr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML文本相关属性
qq_36470686的博客
09-22 2267
文本相关属性用于控制整个段、整个&lt;div.../&gt;元素内文本的显示效果，包括文字的缩进、段落内文字的对齐等显示方式。 text-indent:用于设置段落文本的缩进，默认值为0.被另一个元素（如&lt;br.../&gt;断开的元素不能应用本属性。 text-overflow:用于控制溢出文本的处理方法。该属性支持如下两个属性值。 clip:如果该元素指定了overflow:h...
CSS3属性之text-overflow:ellipsis详解
热门推荐
u013084331的博客
03-14 4万+
1.语法:text-overflow:clip|ellipsis 默认值:clip; 适用于:所有元素 clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 当然这还是不够的，需要加点调料才能出现效果: 那就是配合 overflow:hidden white-space:overflow; 效果
CSS3属性之text-overflow:ellipsis
最新发布
weixin_52512511的博客
08-05 4299
语法：默认值为clip 不显示省略标记:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。:当对象内文本一处时显示省略标记(...)。
文本溢出省略号text-overflow: ellipsis显示无效？这一属性到底该怎么用？
杜永康的博客
12-06 3929
因为 text-overflow: ellipsis; 并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，就需要给 text-overflow: ellipsis; 配上两个个额外的属性：overflow 和 white-space。以以下代码为例： 效果图：值得一提的是，这个div如果给他设置高度，不管设置多少，从文本省略的显示角度来说，是无效的。因为以上方法，针对的仅仅是单行文本省略。如果要实现多行文本省略，请继续往下看：实现多行文本省略，同样的，我们需要用text-overflow: e
html怎么使文档省略号显示,html 文本超出部分 省略号显示
weixin_36313293的博客
06-03 1504
之前使用过这个例子，现在总结说明一下：先给贴代码：01<pstyle="width: 300px;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;">02省略我吧！03省略我吧！04省略我吧！05省略我吧！06省略我吧！07省略我吧！08省略我吧！09省略我吧！10省略我吧！11省略我吧！12省略我吧！13省略我...
CSS属性探秘系列(二)：overflow及相关属性text-overflow
09-25
在CSS世界中，`overflow`属性是一个至关重要的样式规则，用于控制内容在元素框内溢出的行为。在本文中，我们将深入探讨`overflow`及其相关的属性`overflow-x`、`overflow-y`和`text-overflow`，理解它们的用法和应用...
HTML超出文本显示省略号...通过text-overflow实现
09-28
要实现这个效果，我们需要结合使用`text-overflow`, `white-space`和`overflow`这三个CSS属性。以下是具体的实现步骤： 1. **`text-overflow: ellipsis;`**：这是核心属性，告诉浏览器当文本溢出元素边界时，应该...
表格里使用text-overflow后不能隐藏超出的文本的解决方法
09-25
在CSS中，`text-overflow`属性用于处理文本溢出的情况。当文本内容超过其容器的边界时，`text-overflow`提供了两种主要的行为：`ellipsis`和`clip`。`ellipsis`会在文本末尾添加省略号，表示还有未显示的文本；而`...
单/多行文本添加省略号方法详解
12-11
总结来说，单行文本省略号通过`overflow: hidden`, `text-overflow: ellipsis`和`white-space: nowrap`实现，而多行文本的省略号通常需要借助私有属性如`-webkit-line-clamp`，但这不是一种跨浏览器的解决方案。...
css 超过宽度的文字显示点点
12-02
`text-overflow`、`white-space` 和 `overflow` 属性组合使用，就可以实现这种效果，即“超过宽度的文字显示点点”。下面我们将深入探讨这三个属性及其相互作用。 首先，`text-overflow` 属性是用来控制当文本溢出...
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
12-13
今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求 原本使用js截取字符串然后判断字符串长度实现，不过相对比较繁琐，并且字符串长度不能自适应 听说用css的 text-overflow: ellipsis 也可以实现，于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap （限制不换行） 和 overflow 属性为 hidden （隐藏溢出） 即设置样式 style="text-overflow:ellipsis; white-space: nowrap; overflow:
html text-overflow:ellipsis,CSS3 Text-overflow
weixin_30290673的博客
06-17 472
CSS3中Text Effects属性一共有三个；text-overflow;CSS3中一个常用的属性，在《CSS3中有关文本效果的另一个属性：text-overflow的使用。大家在平时的网页制作中一定碰到过内容溢出的问题，比如说文章列表很长，而其宽度又受到限制，此时超出宽度的内容就会以(...)显示。以前实现这样的效果都是由后台程序截取一定的字符数在前台输出，另外一种方法就是使用js截取一定的...
多行文字text-overflow: ellipsis省略号失效问题
qq_51978639的博客
02-03 1273
设置了多行文字超出显示省略号的样式，省略号就是不生效，为此折腾了好久。 问题在于设置多行文字显示省略号时，只能指定显示的行数，不能设置高度
多行文本溢出显示省略号(…) text-overflow: ellipsis
weixin_30808575的博客
08-05 326
关于text-overflow text-overflow属性规定当文本溢出包含元素时发生的事情。 默认值： clip 继承性： no 版本： CSS3 JavaScript 语法： object.style.textOverflow="ellipsis" 语法：text-overflow: clip|ellipsis|string; ...
css3属性text-overflow：ellipsis的用法与注意之处
weixin_38098192的博客
03-13 2616
1.单行文本 text-overflow：clip | ellipsis 默认值：clip 适用于：所有元素 clip：当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 ellipsis：当对象内文本溢出时显示省略标记（...）。 当值为ellipsis，有时不会出现（...），这是因为使用ellipsis的时候必须配合overflow：hidden；white-s...
使用text-overflow:ellipsis对溢出文本显示省略号
peking2009的专栏
10-15 995
ul li { float: left; overflow: hidden; font-size: 12px; margin-right: 10px; text-indent: 0px; } ul li { font-size: 12px; width: 80px; overflow: hidden; white-space: nowrap; text-overfl
css小经验： 转载 - CSS文本溢出省略号：text-overflow:ellipsis
weixin_30819163的博客
07-07 124
　　（转载： http://blog.163.com/yinwei_666/blog/static/2036157320101113102733794/） 很多时候，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。通常做法是网站后台程序截取。 这个标题其实已经是一个老生常谈的问题了。很多时候，比如...
CSS/Js文本溢出自动添加省略号ellipsis
手牵手科技
03-30 748
CSS文本溢出省略号 text-overflow:ellipsis ext-overflow是一个比较特殊的属性，W3C早前的文档中(目前的文档中没有包含text-overflow属性，FML!)对其的定义是: Name: text-overflow-mode Value: clip | ellipsis | ellipsis-word clip : 　不显示省略标记(…)，而是简单的裁切 ell...
html文字超过部分显示为省略号
Cziker的博客
11-07 4652
一：单行文本超出 省略 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示... 二、多行文本溢出 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; //必须结合的属性 ，将对象作为弹性伸缩盒...
.news-bd ul li { height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }中white-space和text-overflow什么意思
06-04
white-space 和 text-overflow 都是 CSS 文本属性。 white-space 属性指定如何处理元素中的空格和换行符。nowrap 值表示禁止文本换行，而保持所有文本在一行内。 text-overflow 属性指定当文本溢出包含它的元素时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值