CSS3截取字符串实例代码【推荐】


Posted in HTML / CSS onJune 07, 2018

截取字符串一般是用js或者后台语言来实现,其实使用CSS也是可以实现此效果的。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://3water.com/" />
<title>CSS教程-三水点靠木</title>
<style type="text/css"> 
#first{
  width:120px;
  height:30px;
  background-color:#F30;
  overflow:hidden;
  text-overflow:clip;
  white-space:nowrap;
}
#second{
  width:120px;
  height:30px;
  background-color:#F30;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:10px;
}
</style> 
</head>
<body>
<div id="first">三水点靠木欢迎您,只有奋斗才会有美好的未来</div> 
<div id="second">三水点靠木欢迎您,只有奋斗才会有美好的未来</div> 
</body>
</html>

特别注意的是:不能够省略white-space:nowrap和overflow:hidden,否则截取字符串无效。

总结

以上所述是小编给大家介绍的CSS3截取字符串实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 #HTML / CSS
css3中的calc函数浅析
Jul 10 #HTML / CSS
详解css3 object-fit属性
Jul 27 #HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 #HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 #HTML / CSS
css3动画效果抖动解决方法
Sep 03 #HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 #HTML / CSS
You might like
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
php的扩展写法总结
2019/05/14 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
js控制table合并具体实现
2014/02/20 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
tensorflow更改变量的值实例
2018/07/30 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
毕业生自荐书
2014/02/03 职场文书
治超工作实施方案
2014/05/04 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
建党伟业的观后感
2015/06/01 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android