如何让超出块级元素的内容使用省略号代替?

先看上面两幅图片,如果实现上面现象该如何

.main{
    width: 100px;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div class="main">
    1111111111111111111111111111111111111111
</div>

必须overflow:hidden;和text-overflow:ellipsis组合才可以实现上述效果

  • overflow:clip|ellipsis|string

解释

clip

修剪文本

ellipsis

显示省略符号来代表被修剪的文本

string

使用给定的字符串来代表被修剪的文本

难道这就完成了吗?那当然不是。如果我们内容有很多的话,但是我们只想在一行显示出来,并且多余的用省略号代替,可问题就是如果内容出现空格或连字符的话会自动换行那怎么办?先看看问题现象

  • 使用同样的样式
.main{
    width: 100px;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
}
  • 现在特别注意内容中间有空格
<div class="main">
    111111111111111111 1111111111111111111111
</div>

现在解决如果在一行显示,现在问题的出现就是她会自动换行,所以我们可以阻止默认换行,认识一个属性

  • white-space

解释

ormal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。

pre-wrap

保留空白符序列,但是正常地进行换行。

pre-line

合并空白符序列,但是保留换行符。

inherit

规定应该从父元素继承 white-space 属性的值。

我们使用white-space: nowrap,下来让我们再试试

```css
.main{
    width: 100px;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  • html还是使用插入空格的那段,现在结果如下图

2016-06-17_024044.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Keegan小钢

Android样式的开发:shape篇

一个应用,应该保持一套统一的样式,包括Button、EditText、ProgressBar、Toast、Checkbox等各种控件的样式,还包括控件间隔、文字...

1882
来自专栏偏前端工程师的驿站

CSS魔法堂:深入理解line-height和vertical-align

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vert...

3188
来自专栏知道一点点

CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

2526
来自专栏菜鸟计划

CSS基础语法(三) CSS的6种特性

样式表常用写法及特性(组合、继承、关联性、权值性、层叠性、重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。-例如:段落元素p、单元...

3444
来自专栏前端杂货铺

绝对定位下的盒模型

元素被绝对定位,那么元素将会脱离正常流(normal flow),并依据包含块来定位。包含块的概念及其判定可以看这里。 在负margin的应用一文中,我们提到了...

2514
来自专栏cnblogs

深入理解和应用display属性(二)

四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inl...

2186
来自专栏CodingBlock

Android查缺补漏(View篇)--自定义View利器Canvas和Paint详解

上篇文章介绍了自定义View的创建流程,从宏观上给出了一个自定义View的创建步骤,本篇是上一篇文章的延续,介绍了自定义View中两个必不可少的工具Canvas...

42812
来自专栏mySoul

css3动画

此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分

1364
来自专栏java小白

CSS三大特性

1674
来自专栏搞前端的李蚊子

使用canvas实现一个圆球的触壁反弹

HTML <canvas id="canvas" width="500" height="500" style="border: 1px solid #FF00...

2935

扫码关注云+社区

领取腾讯云代金券