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实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
js常用代码段整理
2011/11/30 Javascript
使用js 设置url参数
2013/07/08 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
通过C++学习Python
2015/01/20 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
致跳高运动员广播稿
2014/01/13 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis