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 3D位移translate效果实例介绍
May 03 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 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
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
写的htc的数据表格
2007/01/20 Javascript
永不消失的title提示代码
2007/02/15 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
DOM 事件流详解
2015/01/20 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
python实现简易动态时钟
2018/11/19 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
公司拓展活动方案
2014/02/13 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
项目合作协议书
2014/04/16 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
庆祝教师节标语
2014/10/09 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS