CSS控制文本超过宽度 overflow显示为点点…

overme2个月前 (10-17)网页设计206
如下图所示,想要的标题效果是只在一行内显示,但有点标题文字较多。在不使用字符截取的情况下,有没有办法通过Css Overflow控制文本超过宽度时,显示为点点…呢!

以下是实现方法:

  1. 元素类{
  2.         display: inline-block;
  3.         width: 80%;
  4.         white-space:nowrap;
  5.         text-overflow:ellipsis;
  6.         -o-text-overflow:ellipsis;
  7.         overflow:hidden;
  8. }

复制代码

注意: 以上CSS属性要配合使用不能缺少

white-space:nowrap     阻止文字换行
它的属性值有:
  normal 默认。空白会被浏览器忽略。
  pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
  pre-wrap 保留空白符序列,但是正常地进行换行。
  pre-line 合并空白符序列,但是保留换行符。
  inherit 规定应该从父元素继承 white-space 属性的值。

text-overflow:ellipsis; 文字超出隐藏 且出现省略符号
它的属性值:
  clip :修剪文本。(效果和overflow 一样直接切掉)
  ellipsis:显示省略符号来代表被修剪的文本。

overflow:hidden;  这个想必是知道了,溢出时隐藏

来源:https://www.cnblogs.com/pineconeguo/p/10281444.html

相关文章


		Css如何控制网页元素显示在最上层

Css如何控制网页元素显示在最上层

如下图所示,网页中的两个相邻元素,前一个元素被后一个元素遮挡了。这种情况如何调整,才能将前一个元素显示在最前面呢? 方法:为元素设置Z-index样式 z-index:auto   auto可...


		如何解决Css Z-index不生效的问题

如何解决Css Z-index不生效的问题

说来挺简单的一个事,小编硬是鼓捣了小一个上午,才解决这个问题。想着怕以后再遇到,也是为了给广大自学爱好者分享经验,就在此分享z-index不生效的解决方法: 现象:如图两个相邻的元素,想要后一个元...


		CSS布局时如何控制li列表样式

CSS布局时如何控制li列表样式

li列表标签默认样式是前面有一个小圆点或者是数字序号。这个默认样式可以修改吗,当然是可以修改的! 如何通过css修改li标签样式? 在CSS中控制li列表的属性,常用的有list-style-t...


		Css如何给Table下的行tr设置下边框

Css如何给Table下的行tr设置下边框

如下图所示,网页HTML代码中使用是table tr,如何使用Css给每行tr设置下边框呢! 有时候有设置tr边框的需求,写下如下css 开始小编按以往Css的书写方法,尝试写了如下CSS代码...

如何使用CSS实现前后两个元素位置交换

如摘要所述,PC端左右布局的HTML元素,在手机移动端显示时,分别按Width 100%显示,结果展示的是前后的效果。 想要交换两个元素的显示顺序,在此分享实现方法: 首先,想要单独控制html...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。