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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php实现文件下载实例分享
2014/06/02 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
python实现微信小程序自动回复
2018/09/10 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
提高python代码运行效率的一些建议
2020/09/29 Python
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
家长对学生的评语
2014/04/18 职场文书
投资意向书
2014/07/30 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python