html中把多余文字转化为省略号的实现方法方法_HTML/Xhtml_网页制作

来源:脚本之家  责任编辑:小易  

需要准备的材料分别有:电脑、浏览器、html编辑器。1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入css代码:div{width:100px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;webkit-box-orient:vertical;webkit-line-clamp:2;}3、浏览器运行index.html页面,此时文字超过2行会自动把多余部分用省略号显示www.zgxue.com防采集请勿采集本网。

在html中如果要把多余的文字显示为省略号,那么有以下几种方法:

1 2 3 4 5 6 7 8 9 10 11 12 一行表示*/ overflow:hidden;white-space:nowrap;text-overflow:ellipsis;2行表示*/ display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-

单行文本:

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法 一是用程序开截取字符长度,这个其实也是可以的 第二种是用样式来做,这里主要介绍一下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .box{ width: 200px; background-color: aqua; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style></head><body> <div class="box">讲的是克辣椒的洒落看见斯科拉讲的是拉开讲的是了卡机快来撒建档立卡时间到了撒快乐到家撒了看见撒快乐到家撒健康了</div></body></html>

单行文本实现方法: 实现效果: 多行文本溢出显示省略号实现方法: 实现效果: 适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;扩展资料: webkit-line-clamp用来

多行文本:

1、选中这一段2113文字。菜单栏点“编辑”,选择“替换”5261(快捷4102键“ctrl+h”也可)。2、调出“查找和替换”对话1653框。在“查找内容”框内填入一个空格,“替换为”框内不要填写内容。

1.利用-webkit-line-clamp属性

方法和详2113细的操作步骤如下: 2、第二步,完成上述步骤后,在index.html中的标记中,输入CSS代码如果此时文本超过2行,则多余的部分将自动显示为省略号,见下图。这样,就解决了这个问题了。

.box{ width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border:solid 1px black;}

缺点:仅适用于webkit内核或移动端页面。在火狐,ie等浏览器并不支持。

2.用伪元素模拟实现

设定固定宽高,多余部分隐藏,在结尾用包含省略号(...)的元素覆盖部分内容。

.box{ height: 200px; width: 200px; position:relative; line-height:1.4em; height:4.2em; overflow:hidden;}.box::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 -20px 1px 45px; background-color:white;}

这里用一个包含了省略号,且背景色为白色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。

这种思路实现较为简单,兼容性也比较好。

注:如果要兼容ie6或7,则不能使用伪元素,可以使用一个<div>或者<span>标签。如果要支持ie8,需要将::after写成:after。

到此这篇关于html中把多余文字转化为省略号的实现方法方法的文章就介绍到这了,更多相关html多余文字转化为省略号内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html文本溢出显示省略字符的两种常用解决方法
  • html超出文本显示省略号...通过text-overflow实现
  • 规范html代码可以节省修改代码的时间
  • css处理文字过长时显示为多余部分省略
  • css里面怎么让文字长的时候两行显示,最多两行,多余的省略号显示,最重要的是支持ie浏览器,
  • html控制内容显示多余的显示省略号,后面紧跟详细两个字
  • CSS截取字符串,多余文字省略号显示
  • 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号
  • html怎样让超出的内容显示为省略号
  • CSS 一段文本怎么设置超过省略号显示
  • 怎样把word同一段落中的文字之间多余的空格去掉
  • css怎么让p中超出长度的文字省略号显示
  • CSS+div 控制多行文本的显示,多余的以省略号显示
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html/xhtml省略号多余文字html文本溢出显示省略字符的两种常用解决方法html超出文本显示省略号...通过text-overflow实现规范html代码可以节省修改代码的时间html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧iframe标签用法详解(属性、透明、自适应高度)16进制颜色代码(完全)40多个漂亮的网页表单设计实例定义input type=file 样式的方法html中让表单input等文本框为只读不可编辑的方法html中设置锚点定位的几种常见方法html 几种特别分割线特效 html iframe 用法总结收藏html 超级链接详细讲解网页嵌入百度地图和使用百度地图api自定义地图的详细html中input提示文字样式修改的示例代码详解html中表格table的行列合并问题解决layui表格选中指定行的radio单选框并滚动到该行的实现利用div+css3实现一个背景渐变的button按钮的示例代码quill编辑器插入自定义html记录的示例详解html 实现tab切换的示例代码html+css相对宽度和绝对宽度冲突时的div解决方法html table实现复杂表头的示例代码html的relative与absolute使用及区别详解html页面展示json数据并格式化的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved