CSS之APP开发比较实用的CSS属性
简介:本人刚入前端没多久,在做APP的开发的时候,经常遇到一些奇怪的问题,本人经验少,会使用js来解决css上的问题,但,却不知道其实有些css已经帮我们解决了。
1,white-space: nowrap;
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列,但是正常地进行换行。 |
| pre-line | 合并空白符序列,但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
此属性,解决了我们显示数据的时候,由于后台数据中有空格而造成的布局错落,或则难看,可以使用其属性来忽略掉
2,text-overflow:ellipsis;
| 值 | 描述 | 测试 |
|---|---|---|
| clip | 修剪文本。 | 测试 |
| ellipsis | 显示省略符号来代表被修剪的文本。 | 测试 |
| string | 使用给定的字符串来代表被修剪的文本。 |
此属性非常有用,记得在开发APP的时候,有数据列表展示,每个数据都有图片和文字描述,但是文字太多了,我们不需要那么多的字,刚开始的时候,我使用js来控制文字的个数,但是很不明智啊,不过这个有缺点是,不支持多行修剪。
CSS之APP开发比较实用的CSS属性的更多相关文章
- hybird app(混合式app开发)cordova ionic 创建相应平台的app
hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...
- 11个实用的CSS学习工具
1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...
- 20个初学者实用的CSS技巧
过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...
- 网页设计与开发:HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版
网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...
- 一些比较实用的css片段
新看了一个帖子,里面好多实用的css代码块,可拿出来当做功能库.先附上该文地址http://segmentfault.com/a/1190000002773955 里面的内容很多我挑了几个经过我验证的 ...
- Normalize.css – 现代 Web 开发必备的 CSS resets
Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的 ...
- 15个实用的CSS在线实例教程
前端技术可以说是必须学习的一个技术,现在做网站都需要懂DIV.CSS,在国内很多企业招网页设计师都要求会写基本的前端代码,所以前端技术是 必须了解的,对网页设计师本身也有帮助,今天向大家推荐一些不错的 ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- .NET MVC插件化开发(支持Script和css压缩)
上一篇博文里面,没有支持Script和css的压缩功能以及script和css的路径问题也没有解决,所以重新发布一个版本,解决了这几个问题,并且优化了插件路由注册,现在可以很方便的实现热插拔web插件 ...
随机推荐
- DatagridView 控件列顺序与设置的不一样
解决方案如下 : 1. dataGridView1.AutoGenerateColumns = false; 2. 绑定的dataSource 中所有的列都要写进去(列一定是绑定的模型中属性) 先在界 ...
- 修改cmd默认启动路径
1.打开注册表编辑器(WIN+R打开运行.输入regedit,或者直接找到路径,双击打开C:\Windows\regedit.exe): 2.定位到“HKEY_CURRENT_USER\Softwar ...
- vue.js 一些知识点
vue.js 也是试图层的运用方法,跟react的方法类似,不过也有许多的不同地方: 1.vue.js 对于数据也是用{{ }} 进行数据更新: 2.vue.js 使用 v-html 指令用于输出 h ...
- 【bzoj4888】: [Tjoi2017]异或和 BIT-乱搞
[bzoj4888]: [Tjoi2017]异或和 题目大意:给定一个序列,求这个序列所有的连续和的异或值.(n<=1e5 ai<=1e6) 想了各种奇怪的方法就是不会做啊啊啊.. Orz ...
- 驼峰转大写(javaScript)
var a = function(s){return s.replace(/([A-Z])/g,"_$1").toUpperCase();} F12控制台可以直接用
- expect--脚本实现免交互命令
转自:http://blog.51cto.com/lizhenliang/1607723 注意:使用expect脚本时,需要把脚本添加执行权限,然后./test.sh直接执行,不能用sh或者sourc ...
- [jvm]运行时数据区域详解
了解虚拟机是怎么使用内存的,有助于我们解决和排查内存泄漏和溢出方面的问题.详解java虚拟机内存的各个区域,分析这些区域的作用服务对象以及可能发生的问题. 一.运行时数据区域 java虚拟机在执行ja ...
- sql charIndex用法
CHARINDEX(): 写SQL语句我们经常需要判断一个字符串中是否包含另一个字符串,但是SQL SERVER中并没有像C#提供了Contains函数,不过SQL SERVER中提供了一个叫CHAE ...
- 爱漂泊人生 30个php操作redis常用方法代码例子
http://www.justwinit.cn/post/8789/ 背景:redis这个新产品在sns时很火,而memcache早就存在, 但redis提供出来的功能,好多网站均把它当memcach ...
- docker 容器 centos + tomcat + jdk
环境: 阿里云ecs服务器 步骤: 1.安装docker 2.获取centos镜像 3.下载tomcat 和 jdk 安装包 4.配置 1.安装docker https://www.cnblogs.c ...