<p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
        就是比如有一行文字,很长,表格内一行显示不下.
    </p>

现在解释一下为什么要这样做:

1、text-overflow: ellipsis; 

这里的重点样式是  text-overflow: ellipsis;

不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。

我在网上看到有很多人说opera不支持text-overflow,可能因为我用的是最新版本的,已经支持这个属性了,所以没办法测试,不过网上给支持低版本的opera一个办法,就是-o-text-overflow:ellipsis;至于火狐,也有很多人说不支持,版本问题无法考证,大家有试过的可以出来指证一下,这里有个《在火狐里 怎样用CSS限制字数并以点的形式显示》,可以参考一下。

2、white-space

顺便解释一下white-space的用法

white-space属性声明建立布局过程中如何处理元素中空白符。(废话一句,这里的空白符应该指我们用键盘敲入的空格或回车,因为用 或<br>无论white-space设置什么都会有空格或回车。)

下面是wschool上white-space可能的值:

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

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

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

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

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

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

CSS控制文字只显示一行 超出部分显示省略号的更多相关文章

  1. CSS控制文字只显示一行,超出部分显示省略号

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...

  2. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  3. CSS控制文字显示一行,超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  4. css控制文字长度,超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  5. --css 控制文字多使用省略号

    --css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...

  6. CSS控制文字,超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  7. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  8. css设置一行显示,超出部分显示...

    碰到一些介绍时候需要一行显示,然后超出部分用...替代 white-space: nowrap;不换行显示text-overflow: ellipsis;以...显示overflow: hidden; ...

  9. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

随机推荐

  1. tp5集成淘宝,微信,网易,新浪等第三方登录

    tp5集成淘宝,微信,网易,新浪等第三方登录 一.总结 一句话总结: 接口 链接 实现的话就是这些平台给的一个接口(链接),你通过这些接口登录进去之后,它会给你返回用户名,头像之类的信息,我们的网站存 ...

  2. JS学习笔记(模态框JS传参)

    博主最近基于django框架的平台第一版差不多完成了 今天整理下开发过程中遇到的前端知识 基于前端bootstrap框架模态框传参问题 上前端html代码: <div class="m ...

  3. 微信小程序封装storage(含错误处理)

    这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({ key:"", success: function (res) { }, fail ...

  4. 牛客网——G大水题

    链接:https://www.nowcoder.net/acm/contest/75/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  5. ISE创建Microblaze软核(二)

    ISE创建Microblaze软核(二) (2012-07-13 15:09:08) 转载▼ 标签: 杂谈 分类: FPGA开发 第四步 进入Platform Studio操作界面 通过向导创建软核后 ...

  6. Web 端屏幕适配方案

    基础知识 像素相关 1.像素 :像素是屏幕显示最小的单位. 2.设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. ...

  7. 【转】Selenium2 API详解

    [转自]http://blog.csdn.net/wuxuehong0306/article/details/49762961 打开浏览器 Ø  打开firefox浏览器 WebDriver driv ...

  8. ASP.NET FORM认证配置排错记录

    搞了2小时都不能实现自动跳转到登录页面,后删除了配置文件中的name,就解决问题了. <authorization>      <deny users="?" / ...

  9. protel99 se中出现许多Backup of 文件,修改过保存时,总会出现备份文件,怎么才能取消这一设置?

    在file选项左边有个向下的大箭头标示 点开 有个prefereces项 点开之 把create backup项勾掉即可

  10. IOS NSCharacterSet 去除NSString中的空格

    去除 username中的空格,table newline,nextline 代码如下: NSCharacterSet *whitespace = [NSCharacterSet  whitespac ...