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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【python】详解pandas库的pd.merge函数「建议收藏」

    【python】详解pandas库的pd.merge函数「建议收藏」pandas.DataFrame.mergepd.merge(left,right,how=’inner’,on=None,left_on=None,right_on=None,left_index=False,right_index=False,sort=True,suffixes=(‘_x’,’_y’),copy=True,indi…

    2022年4月28日
  • c++界面开发工具_visual c++界面设计教程

    c++界面开发工具_visual c++界面设计教程亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv30.2正式发布!此版本包含新的Office2019样式可视化主题、改进了Shell控件以及其他一些新功能和改进!本文将为大家介绍v30.2中发布的新功能!让您对BCG最新发布的版本有一个全新的认识和了解。需要最新版的可以点击这里【BCG下载】…

    2022年10月8日
  • 2019年日历假期添加

    2019年日历假期添加

    2021年11月27日
  • Web渗透信息收集之域名、端口、服务、指纹、旁站、CDN和敏感信息

    Web渗透信息收集之域名、端口、服务、指纹、旁站、CDN和敏感信息[网络安全]二.Web渗透信息收集之域名、端口、服务、指纹、旁站、CDN和敏感信息最近开始学习网络安全和系统安全,接触到了很多新术语、新方法和新工具,作为一名初学者,感觉安全领域涉及的知识好广、好杂,但同时也非常有意思。所以我希望通过这100多篇网络安全文章,将Web渗透的相关工作、知识体系、学习路径和探索过程分享给大家,我们一起去躺过那些坑、跨过那些洞、守住那些站。未知攻,焉知防,且看且珍惜,也希望您能推荐和支持作者的公众号。娜璋AI安全之家于2020年8月18日开设,将专注于Python和安全技术,主

    2022年11月1日
  • Spring Boot 中的异步调用[通俗易懂]

    Spring Boot 中的异步调用[通俗易懂]SpringBoot中的异步调用通常我们开发的程序都是同步调用的,即程序按照代码的顺序一行一行的逐步往下执行,每一行代码都必须等待上一行代码执行完毕才能开始执行。而异步编程则没有这个限制,代码的调用不再是阻塞的。所以在一些情景下,通过异步编程可以提高效率,提升接口的吞吐量。这节将介绍如何在SpringBoot中进行异步编程。要开启异步支持,首先得在SpringBoot入口类上加上@EnableAsync注解:@SpringBootApplication@EnableAsyncpublic

    2022年7月11日
  • AppFabric 版本区分

    AppFabric 版本区分目前CSDN上可以下载到的AppFabric有两个版本:1,WindowsServerAppFabricSetup_x64_6.1.exe,2010/12/3发布的,不推荐使用,Win10安装后IIS启动失败,网址:https://www.microsoft.com/zh-cn/download/details.aspx?id=158482,Microsoft…

    2022年10月16日

发表回复

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

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