width,overflow与white-spce联用使得超长部分文字已省略号显示

最新推荐文章于 2023-02-27 13:35:09 发布

原创最新推荐文章于 2023-02-27 13:35:09 发布 · 699 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS来实现特定布局效果的方法，包括如何通过设置display、width、float等属性来控制元素的显示方式，并利用overflow和white-space属性来处理溢出内容。

display:block;/*定义为块级*/
width:500px;/*要显示文字的宽度*/
float:left;/*左对齐*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenxiaodan_danny

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)

09-27

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，不过我们经常在文本溢出中使用这个参数

参与评论您还未登录，请先登录后发表或查看评论

在gridview中把行中多余的字符用省略号代替（C#）

weixin_30315905的博客

03-28

214

1 第一种情况 2 <asp:BoundField DataField="QuestionName" HeaderText="试题描述" HeaderStyle-Width="45%" ItemStyle-ssClass="LimitNameNums"3 HeaderStyle-Font-Bold="false" HeaderStyle-Font-Underline="fals...

gridview里的格式问题

___ 、努ㄌ

06-02

530

ASP.NET：GridView的一般换行与强制换行

gaotongzhao的专栏

07-26

5915

今天碰到了GridView换行的问题，找一下解决方案，如图：首先在设置页面属性：评论内容列绑定的数据很长，显示的时候在一行里面显示，页面拉得很宽。为了给内容换行，只需要在这一列的在RowDataBound中添加上了一句：e.Row.Cells[2].Style.Add("

列表中如何只显示部分文本，多余的以省略号代替

铭毅雨的博客

08-30

841

效果咱就不展示了，字面已经表达很清楚了。首先IE8下面的写法，很简单 [code="html"] .content{ width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin...

超出部分省略号的形式进行显示

leigangg的博客

02-19

280

一.文本显示省略号 文本类容一般都是全部显示的,而在有些情况下我们需要让他不显示出来,例如要做出这种情况我只需要三段代码就可以实现了, 具体来看一下代码: <style> .box{ height: 100px; width: 100px; background-color: #f00;...

css white-space属性详解

wangongchao的博客

02-27

2万+

css white-space属性详解

white-space属性

weixin_45545395的博客

07-25

2312

white-space属性根据MDN的文档，white-space CSS 属性是用来设置元素中的空白的。取值有 normal 文本会自动换行，连续的空白符会被合并，换行符会被当作空白符来处理。 nowrap 文本不会自动换行，会溢出显示，直到遇到<br>标签，连续的空白符会被合并。 pre 文本不会自动换行，会溢出显示，会保留多个空白符，遇到换行符和<br>标签会换行。这个值能很好地将文本按源代码的文本书写格式原样输出。 pre-wrap 会自动换行，连续的空白符会被保留，

转 table td 中定义了 width 但 overflow 不起作用的解决方法。

fywxin的专栏

05-01

301

<!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> ..

Css_overflow详解

m0_37510446的博客

05-08

2748

本章主要是对Css中的overflow元素进行讲解：该元素主要是用来处理，当我们的文本超出指定文本框时，如何进行处理首先分别讲一下overflow的五大属性： visiable:当我们的文本超出文本框时，其内容不会被修剪，会显示在文本框之外 <!DOCTYPE　html> <html> <head> <meta charset="UTF-8"/>...

min-width 和 overflow 属性搭配,出现横向滚动条

qq_39822451的博客

11-20

2698

table td 中定义了 width 但 overflow 不起作用的解决方法。

weixin_30467087的博客

12-25

295

HtmlCode <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <h...

java 当超过一定限制的字数时采用省略号

Zhang895341748的专栏

10-17

1561

<c:if test="${fn:length(o.title)>10}"> ${fn:substring(o.title, 0, 10)} ... </c:if> <c:if test="${fn:length(o.title)<=10}"> ${o.title} </c:if>

内容超过长度后以省略号显示的方法

gundumw100的专栏

04-10

2335

blueidea /*li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } /*]]>*/ web标准常见问题大全web标准常见问题大全这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的

java前端文本超出显示省略号

大道至简，悟在天成。

04-27

1429

eg:html代码添加的css样式 +title<!DOCTYPE html> <html> <head> <style type="text/css"> #test{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inli...

java中页面显示文字过长用点显示_span标签中显示固定长度，超出部分用省略号代替，光标放到文字上显示全部...

weixin_42356073的博客

02-25

1001

#在span中实现显示某段内容，固定其长度，多余部分用省略号代替，这样就用到html的title属性；如：title属性：其值是text，属性描述是规定元素的工具提示文本，意思就是鼠标移到元素上时显示title中的内容；以span为例实现上述功能：html：筛选标签：　　 js：$("#showLabelAndAttrName").text("测试标签1-测试标签属性1、测试标签属性2");$(...