使用css方法，实现文字字符串截断处理

最新推荐文章于 2021-08-03 20:45:33 发布
最新推荐文章于 2021-08-03 20:45:33 发布
阅读量2.9k 收藏
点赞数
分类专栏： css 文章标签： css 字符串省略号代替
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30337695/article/details/50553497
版权 
其实这个也是借鉴别人的，好东西需要拿出来和大家
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>css文字截断____dowhatyouwant</title>
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;

padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
</head>

<body>
<div class="test">我来测试一下这个文字截断是不是真的有效果</div>
</body>
</html>

实现的效果：

规定段落中的文本不进行换行：
p
  {
  white-space: nowrap
  }
 
text-overflow: clip|ellipsis|string;
值描述测试
clip修剪文本。测试
ellipsis显示省略符号来代表被修剪的文本。测试
string使用给定的字符串来代表被修剪的文本。 

 
 
 
 

十年树木_2015
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用CSS截断字符串的两种实用方法
09-25
CSS截断字符串在一些文字过长需要截取时还是比较实用的，其实实现方法有很多，下面为大家详细介绍几种比较实用的技巧，感兴趣的朋友可以参考下，希望对大家有所帮助
html 字数太多强制截断,使用text-overflow截断超长文字显示技巧
weixin_33575756的博客
06-03 1731
CSS里的text-overflow属性能用来控制超长溢出的文字内容的显示方式，超出的文字可以是直接截断、用省略号表示，或用自定义的字符替代。text-overflow的起作用环境是在一个‘block’状态下的父元素容器里，它的inline子元素上水平方向不能换行(因为 ‘white-space: nowrap’)的情况下。要想text-overflow起作用，我们还不行能让‘overflow’的...
CSS解决无空格太长的字母,数字不会自动换行的问题
weixin_34357887的博客
05-25 336
其实很简单，代码如下所示，注意 Style： <div class="detail_title" style="word-break: break-all;"><%=StringUtil.toHTML(title) %></div> 默认情况下，一个 DIV或者其他元素的文本，如果都是无文字分隔符，无空格，则不会自动换行，比如: <div c...
html 数字强制换行,利用CSS实现连续的纯数字或字母强制换行的方法
weixin_31689491的博客
06-08 739
我们在网页样式中经常可以遇到这样的问题，没有做任何设置的时候，系统会默认整串数字或单词会在行位自动换行，不会截断数字和单词，这样的虽然很利于阅读，但是有时会造成页面不美观，我们需要在CSS里设置下强制截断。CSS代码如下：white-space:normal; word-break:break-all;white-space: normal|pre|nowrap|pre-wrap|pre-line...
DIV通过样式控制字符串的截取
05-16 702
Css实现单行文本、多行文本、截断
曲小强
11-06 9676
一、单行文本截断 text-overflow 文本溢出经常用到的应该就是 text-overflow:ellipsis 了，只需轻松几行代码就可以实现单行文本截断。 div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 二、-webkit-line-clamp 实现 div { /......
css截取字符串的方法,CSS3截取字符串实例代码【推荐】
weixin_30336701的博客
08-03 823
截取字符串一般是用js或者后台语言来实现，其实使用CSS也是可以实现此效果的。代码实例如下:CSS教程-脚本之家#first{width:120px;height:30px;background-color:#F30;overflow:hidden;text-overflow:clip;white-space:nowrap;}#second{width:120px;height:30px;back...
css实现字符串截断并加省略号示例
09-25
主要介绍了css实现字符串截断并加省略号示例,需要的朋友可以参考下
使用CSS不用程序实现文字自动截断 用省略号代替
10-30
使用CSS不用程序实现文字自动截断 用省略号代替
CSS截断字符串
weixin_30480651的博客
04-14 166
方法一： <div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div> 说明：优点是内容可以为任何HTML元素，包括超链接和图片等，在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值，并且宽度不能是百分数，否则在IE中...
使用CSS做字符串截取
小小程序员
05-02 527
.jiequ{ width: 250px; //截取的宽度 white-space:nowrap; //不换行 overflow: hidden; //超出的部分隐藏 display: block; //以块级显示 text-overflow: ellipsis; //超出的部分 ... 显示 }...
CSS样式截取字符串
爱吃鱼油
01-10 1794
css 截取字符串  div.test{ width:200px; height:100px; border:1px solid red; padding:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 做自己的SEO 做自己的DIV+CSS 做自己的PHP
CSS字符串截取
ime33的博客
06-13 1496
未经允许，不得转载！ 水平有限，欢迎指正、交流！ 源码： css截取字符串 *{padding: 0;margin: 0;font-family: "微软雅黑"} h3{margin: 15px 0;text-align: center;} .demo{ margin: 15px 0 30px 0; } div.demo1
css截取字符串的方法,css与jq 截取字符串的简单方法
weixin_28717611的博客
08-03 552
jq与css截取字符串的简单方法/css的原理是根据宽度来控制显示多少字符//方法一:-----如果用css推荐使用，最新版FF兼容/.newBox{width:400px;background-color:#eee;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/方法二---- 兼容低版本浏览，但是啰嗦/.lowBox...
CSS截取字符串
xinzheng_wang的博客
01-27 1032
.jiequ { width:100px; white-space:nowrap; overflow:hidden; float:left; -o-text-overflow:ellipsis; /* for Opera */ text-overflow:ellipsis; /* for IE */ } .jiequ:after
div+css截取字符串在规定长度，超出部分用。。。代替
ystyaoshengting的专栏
06-13 8705
Author: CreateTime:2012-02-06 12:32 summy:表现层的问题需要表现层解决，不在服务器端提交处理，相比截取字符段的c#处理代码，用css处理轻松很多--> div{ width:260px; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:
csscss截断字符串
iteye_542的博客
12-02 89
css截断DIV td div中的字符串 white-space:nowrap;overflow:hidden;text-overflow:ellipsis ; 如 00000000000000000000 最后的效果 000...
css截取字符串，实现标题过长用。。。。代替
huihuangjiuai的专栏
05-14 1183
list .ad_title {     float: left;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     width: 220px; } 效果如图：
使用html,css,js语法 生成根据像素长度截取字符串的方法
最新发布
06-03
您可以使用 JavaScript 来实现根据像素长度截取字符串的方法。以下是一个简单的示例代码： HTML： ```html <div id="text">Hello World!</div> ``` CSS： ```css #text { width: 100px; /* 设置宽度 */ overflow: hidden; /* 超出部分隐藏 */ white-space: nowrap; /* 不换行 */ text-overflow: ellipsis; /* 超出部分用省略号表示 */ } ``` JavaScript： ```javascript function truncateText(id, maxWidth) { var element = document.getElementById(id); var text = element.innerHTML; var width = element.offsetWidth; var ellipsis = '...'; while (width > maxWidth && text.length > 0) { text = text.slice(0, -1); element.innerHTML = text + ellipsis; width = element.offsetWidth; } } ``` 在上面的示例中，我们定义了一个名为 `truncateText` 的函数，该函数接受两个参数：元素的 ID 和最大宽度（以像素为单位）。函数会获取指定元素的文本内容，并不断缩短文本内容直到它的宽度小于或等于最大宽度为止。在缩短文本内容的过程中，我们还添加了省略号，以表示文本被截断了。最后，我们将缩短后的文本内容更新到指定的元素中。 您可以在需要截取文本的元素上调用该函数，例如： ```javascript truncateText('text', 100); ``` 上述代码将截取 ID 为 `text` 的元素的文本内容，使其在宽度不超过 100 像素时不被截断。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值