音效素材网提供各类素材，打造精品素材网站！

站内导航站长工具投稿中心手机访问

音效素材

热门搜索： 狗叫声打雷钟声 wordpress模板图标素材

网页制作|编程语言|产品运营|平面设计|操作系统|数据库|服务器|

当前位置：首页 > 教程 > 网页制作 > HTML > Html长文本超出标记宽度后自动截取实现代码

Html长文本超出标记宽度后自动截取实现代码
日期：2021-09-04 19:26:59 来源：脚本之家

我们在显示长文本时，往往需要去在Ｃ#端去截取字符，但这绝对不是一个好方面，因为我们的长文本往往都是代ＨＴＭＬ标记的，你一个载不好，就会出现乱码问题（出现半个ＨＴＭＬ标记），而比较好的作法就是通过ＣＳＳ去实现这个功能
span标签当内容超出强制不断行自动换行

复制代码

代码如下:

white-space:nowrap;white-space:norma;display:inline-block;

超出自动隐藏英方不断行显示 (必须在块元素内)

复制代码

代码如下:

overflow:hidden;white-space:nowrap;

而如果希望在文字后面加上个...，就可以使用text-overflow: ellipsis;一般的主流浏览器都支持这个属性

复制代码

代码如下:

.tbconxx {
float: left;
width: 255px;
padding: 5px 10px;
}
.tbconxx li,tbconxx span {
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
width: 240px;
}

这样就可以实现超过的文字自动隐藏的效果了。

截取 Html内容长文本

上一篇：有没有仔细了解过标签它是如何定义如何使用

下一篇：html中的meta标记简单对照

您感兴趣的教程

在docker中安装mysql详解

本篇文章主要介绍了在docker中安装mysql详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编...

详解安装 docker mysql2017-05-05

win10中文输入法仅在桌面显示怎么办?

win10中文输入法仅在桌面显示怎么办?

win10系统使用搜狗，QQ输入法只有在显示桌面的时候才出来，在使用其他程序输入框里面却只能输入字母数字，win10中...

win10 中文输入法2020-12-07

一分钟掌握linux系统目录结构

这篇文章主要介绍了linux系统目录结构，通过结构图和多张表格了解linux系统目录结构，感兴趣的小伙伴们可以参考一...

结构目录系统 linux2016-05-03

PHP程序员玩转Linux系列 Linux和Windows安装

这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章，Linux和Windows安装nginx教程，具有一定的参考价值，感兴趣...

玩转程序员安装系列 PHP2017-04-12

win10怎么安装杜比音效Doby V4.1 win10安装杜

第四代杜比®家庭影院®技术包含了一整套协同工作的技术，让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

win10杜比音效2015-09-22

纯CSS实现iOS风格打开关闭选择框功能

这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作...

css ios c2021-09-05

Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

Win7如何给C盘扩容 Win7系统电脑C盘扩容的

Win7给电脑C盘扩容的办法大家知道吗？当系统分区C盘空间不足时，就需要给它扩容了，如果不管，C盘没有足够的空间...

Win7 C盘扩容2021-03-29

百度推广竞品词的投放策略

SEM是基于关键词搜索的营销活动。作为推广人员，我们所做的工作，就是打理成千上万的关键词，关注它们的质量度...

百度推广竞品词2012-07-31

Visual Studio Code(vscode) git的使用教程

这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。...

教程 Studio Visual Code git2017-11-10

七牛云储存创始人分享七牛的创立故事与

这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

七牛 Go语言2015-12-28

Win10预览版Mobile 10547即将发布 9月19日上午

微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布，他表示该版本已进入内部慢速版阶段，发布时间目...

Win10 预览版2015-09-17

HTML标签meta总结,HTML5 head meta 属性整理

移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析HTML代码，更好地将移动web前端页面表现出来...

2021-09-03

移动端html5模拟长按事件的实现方法

这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家...

移动端 html5 长按2021-09-04

HTML常用meta大全(推荐)

这篇文章主要介绍了HTML常用meta大全(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参...

2021-09-03

cdr怎么把图片转换成位图? cdr图片转换为位图的教程

cdr怎么把图片转换成位图? cdr图片转换为

cdr怎么把图片转换成位图？cdr中插入的图片想要转换成位图，该怎么转换呢？下面我们就来看看cdr图片转换为位图的...

cdr 图片位图2018-01-29

win10系统怎么录屏?win10系统自带录屏详细教程

win10系统怎么录屏?win10系统自带录屏详细

当我们是使用win10系统的时候，想要录制电脑上的画面，这时候有人会想到下个第三方软件，其实可以用电脑上的自带...

win10 系统自带录屏详细教程2021-05-18

+ 更多教程 +

精选教程

热门教程

关于我们

音效素材网整合国内外优质的资源，内容涉及js效果代码，平面设计教程，网页设计教程，cms建站，网页模版等领域，提供最新的行业资讯，设计教程和素材参考学习。

版权声明

声明：本站发布的资源均来自互联网，仅供交流学习之用，请勿作商业用途，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

音效素材网(YinXiaoSuCai.CN)

Copyright © 1999-2022 音效素材网版权所有京ICP备11032199号-4 关于我们 | 广告合作 | 版权声明 | 联系我们 | 友情链接 | RSS订阅 |

HTML CSS Dreamweaver Frontpage