CSS控制文本超出指定宽度显示省略号和文本不换行

一般的文字截断(适用于内联与块):.text-overflow{display:block;/*内联对象需加*/width:31em;/*何问起hovertree.com*/word

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

一般的文字截断(适用于内联与块):

.text-overflow {
    display:block;/*内联对象需加 */
    width:31em;/* 何问起 hovertree.com */
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义:

对于表格超出范围显示省略号

 1 table{
 2     width:30em;
 3     table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
 4 }
 5 /*
 6 何问起
 7 hovertree.com
 8 */
 9 td{
10     width:100%;
11     word-break:keep-all;/* 不换行 */
12     white-space:nowrap;/* 不换行 */
13     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
14     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
15 }

需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“…”,

其它的浏览器文本超出指定宽度时会隐藏。

特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120574.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • vue文件中引入js_vue中require引入js

    vue文件中引入js_vue中require引入js由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。vue-cli2.0的作法是在static文件下创建js。vue-cli3.0的写法则是直接在public文件夹下创建js、具体操作如下:1、在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器…

    2022年10月8日
    1
  • Postman教程大全「建议收藏」

    Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件Postman背景介绍用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具。今天给大家介绍的这款网页调试工具不仅可以调试简单的css、html、脚本等简单的网页基本信息,它还可以发送几乎所有类型的HTTP请求!Postman在发送网络HTTP请求方面可以说是Chrome插件类产品中的代表产品之一。Postman的操

    2022年4月6日
    47
  • 2014 ACM省赛总结

    2014 ACM省赛总结

    2021年12月3日
    42
  • ExecuteSQL

    ExecuteSQL描述:该处理器执行SQL语句,返回avro格式数据。处理器使用流式处理,因此支持任意大的结果集。处理器可以使用标准调度方法将此处理器调度为在计时器或cron表达式上运行,也可以由传入的流文件触发。SQL语句来源可以来自该处理器属性SQLselectquery,也可以来自上一个处理器的输出流(UTF-8格式)(GenerateTableFetch,ConvertJsonToSq…

    2022年5月11日
    48
  • Pytest(6)重复运行用例pytest-repeat「建议收藏」

    Pytest(6)重复运行用例pytest-repeat「建议收藏」前言平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来。自动化运行用例时候,也会出现偶然的bug,可以针对单个用例,

    2022年7月28日
    3
  • PHP实现打印出库单,有没有实现过?

    PHP实现打印出库单,有没有实现过?

    2021年10月28日
    55

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号