CSS 文本溢出时显示省略标记

最新推荐文章于 2022-07-13 20:44:45 发布
最新推荐文章于 2022-07-13 20:44:45 发布
阅读量75 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/zhufu9426/p/7792882.html
版权

如标题所示...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>CSS 文本溢出时显示省略标记</title>  
<style type="text/css">
.overflowTest{
    width:200px;/*基本容器显示宽度*/
    overflow:hidden;/*overflow 属性规定当内容溢出元素框时发生的事情。*/
    text-overflow:ellipsis;/*clip:修剪文本|ellipsis:显示省略符号来代表被修剪的文本|string:使用给定的字符串来代表被修剪的文本(自定义)*/
    white-space:nowrap;/*文本不会换行*/
}
</style>
</head>
<body>
<div>正常显示:qwertyuiopasdfghjklzxcvb</div>
<div class="overflowTest">处理后:qwertyuiopasdfghjklzxcvb</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/zhufu9426/p/7792882.html

weixin_30337251
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
文本溢出时显示省略标记
ice-cream
11-21 123
语法：text-overflow : clip | ellipsis   取值： clip ：默认值 。不显示省略标记(...)，而是简单的裁切. ellipsis： 当对象内文本溢出时显示省略标记(...).   可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .   如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容...
CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
云烟阁
12-22 4万+
语法：  　　text-overflow : clip | ellipsis  　　参数：  　　clip : 　不显示省略标记（...），而是简单的裁切 　　（clip这个参数是不常用的！） 　　ellipsis : 　当对象内文本溢出时显示省略标记（...） 　　说明：  　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 　　请您注重，text-ove
css 实现文本显示省略符
远走的兔子博客
05-30 3856
         overflow: hidden;          text-overflow: ellipsis;       display: -webkit-box;      -webkit-line-clamp: 2;      -webkit-box-orient: vertical;      word-break: break-all;      white-space: no...
如何使用:文本溢出时显示省略标记（...）text-overflow : ellipsis
开心就好！
09-09 470
text-overflow 语法： text-overflow : clip | ellipsis  参数： clip : 　不显示省略标记（...），而是简单的裁切ellipsis : 　当对象内文本溢出时显示省略标记（...） 说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。请参阅我编写的其他书目。 示例： div { te...
如何让文本溢出时显示省略标记“……”
ft2166826的专栏
03-05 2300
语法：text-overflow : clip | ellipsis 取值： clip ：默认值 。不显示省略标记(……)，而是简单的裁切。 ellipsis： 当对象内文本溢出时显示省略标记(……)。  可惜text-overflow 还只是IE的私有属性而已，也没被收录到W3C标准里   Ⅰ. 如果想让某个容器（div或者li 等块级元素）显示一行文字，当文字内容过多时，不换
CSS实现限制字数功能当对象内文本溢出时显示省略标记
09-25
CSS 提供了一种解决方案，即通过 `text-overflow` 属性来实现文本溢出时显示省略标记的功能。本文将详细探讨如何使用 CSS 来实现这一效果，并提供相关的代码示例。 首先，`text-overflow` 属性是用来控制当对象内的...
css样式显示省略号自定义宽度超过隐藏显示省略标记
09-25
`，这将告诉浏览器在内容超出宽度时显示省略号。 ```css .xx { text-overflow: ellipsis; } ``` 组合以上代码，完整的CSS样式如下： ```css .xx { display: block; width: 200px; /* 自定义宽度 */ ...
css控制文本实现越界省略号以及自动换行
09-25
/* 当对象内文本溢出时显示省略标记 */ } ``` 这样，表格的每一列都将保持固定宽度，当单元格内的文本超出时，会显示省略号。 总结来说，CSS中的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: ...
css3文本溢出使用省略标记（…）
alary2012的博客
05-26 886
在CSS3中，文本溢出text-overflow用于设置是否使用一个省略标记（…）标示对象内文本的溢出。 语法： 　　text-overflow:取值; 说明： text-overflow属性取值只有2个： 单独使用text-overflow属性是无法得到上面图1效果的。因为text-overflow属性只是说明文字溢出时用什么方式显示，要实现溢出时产生省略号效果，还须定义...
css 文本溢出时显示省略标记（...）
php菜鸟技术天地
07-02 896
ul {width:300px; margin:50px auto;}   li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}          CSS实战精萃 - Pro CSS Techniques CSS实战：id是狙击枪 clas
HTML5中的溢出文本省略标记可以通过CSS样式实现
BLOG域名:programb.blog.csdn.net
06-29 302
以确保文本不会换行。最后，需要设置一个固定的宽度（或高度），以便在文本溢出时显示省略号。HTML5中的溢出文本省略标记可以通过CSS样式实现。在这个示例中，当文本长度超过容器宽度时，将显示省略号。
关于css的一些基础 ：css省略号
q1ngqingsky的博客
07-07 6544
以前总是记不住省略号，没有理解透彻「😮‍💨」css 单行省略号/css多行省略号 单行省略号有三个要素：多行文本省略号：【webkit内核】
CSS省略号的制作
ghjkfuihg的博客
07-13 5747
1.先强制一行内显示文本 white-space:nowrap;2.超出的部分隐藏溢出 overflow:hidden;3.文字用省略号代替超出的部分 text-overflow:ellipsis;一、给父元素设置1.溢出隐藏 overflow: hidden;2.设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 line-height: 20px;3.设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末
CSS 省略号（单行省略号、多行省略号）
热门推荐
Ares5k
04-09 7万+
单行超出省略号代替、多行超出省略号代替
用省略符号来代表被修剪的文本，表格中文字太多，只显示部分实现
ahzxj2012的专栏
10-10 1356
My JSP 'view.jsp' starting page                        户名     内容     时间     时间           admin     123     2012     20124           admin     233ssssssssssssssssssssssssss33f
CSS实现省略号
随心所欲的便笺
03-24 4562
省略号作用 在制作网页的时候，经常会遇到文字内容太多超出部分省略的情况。例如： 我们可以把这个类设置在公共样式里，需要的时候随时调用。 实现方法 .omit { width: 185px; /* 省略号的设置 前提：文本父级要有宽度 */ white-space: nowrap; /* 设置文本不换行 */ overflow: hidden; text-overflow: ellipsis; } ...
div 特价效果，右上角标记
me
07-23 1214
&lt;div style="position:relative;"&gt; &lt;b style=" position:absolute; width:80px; height:80px; right:0px; top:0px; "&gt; &lt;img src="img/new.p...
css--溢出文字显示省略标记隐藏
白菜先森
12-02 1343
在网页上我们经常看到如下图的文本省略的显示方式，那么是如何做到这种效果的呢？要想解决这个问题，我们先要了解文字溢出隐藏。 word-break：自动换行 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 主要处理英文单词 white-space white-space设置或检索对象内文本显示方式。通...
css 文本溢出时显示省略号
最新发布
07-13
要在CSS中实现文本溢出时显示省略号，可以使用`text-overflow`和`overflow`属性配合使用。具体步骤如下： 1. 设置容器的宽度或高度，并设置`overflow`属性为`hidden`，以限制文本的显示区域。 2. 使用`white-space...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值