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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
PHP 第一节 php简介
2012/04/28 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php中chdir()函数用法实例
2014/11/13 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
JS 控制非法字符的输入代码
2009/12/04 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
puppeteer库入门初探
2019/01/09 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python魔法方法详解
2019/02/13 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
Python实现点云投影到平面显示
2020/01/18 Python
酒店大堂副理的职责范文
2014/02/13 职场文书
益达广告词
2014/03/14 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
感恩节寄语2015
2015/03/24 职场文书
公司开会通知
2015/04/20 职场文书
风之谷观后感
2015/06/11 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书