我前期是一名前端开发者,经常会遇到关于文本模型的问题,很多地方我们会经常遇到这种问题。例如栏目的标题,在设计师给我们图的时候并不会考虑到标题的长度,所以我们自己开发的过程中自己注意这一点。

首先和大家将一下文本模型的一些基本的属性然后再针对一些案例去解析

<text>模型属性

属性

描述

Css

Text-overflow

规定当文本溢出包含元素时发生的事情

3

text-fill-color

给文字指定填充颜色

text-stroke

给文字描边

text-stroke-width

给文字描边的宽度

text-stroke-color

给文字描边的颜色

Text-shadow

向文本添加阴影

3

Word-break

规定非中日韩文本的换行规则

3

Word-wrap

允许对长的不可分割的单词进行分割并换行到下一行

3

Text-overflow

描述

Clip

修建文本

Ellipsis

显示省略符号来代表被修剪的文本

String

使用给定的字符串来代表被修剪的文本

案例一:限制字数 通过overflow:hidden

显示图如上,这种方式需要限制高度和行高,要将内容控制在现实范围内,所以这种方式是不大推荐的方式,这里没有用到文本模型

案例二:通过text-overflow: ellipsis;

这种方式是开发项目中比较想要的效果,因为他对行高无要求,而且限制了换行的行为

css3 文本模型的更多相关文章

  1. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  2. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...

  3. Cool!15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  4. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

  5. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

  6. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  7. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  8. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  9. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

随机推荐

  1. HDU_5734_数学推公式

    题意:给一个向量W={w1,w2……,wn},和一个向量B,B的分量只能为1和-1.求||W-αB||²的最小值. 思路:一来一直在想距离的问题,想怎么改变每一维的值才能使这个向量的长度最小,最后无果 ...

  2. RocketMQ学习笔记(4)----RocketMQ搭建双Master集群

    前面已经学习了RockeMQ的四种集群方式,接下来就来搭建一个双Master(2m)的集群环境. 1. 双Master服务器环境 序号 ip 用户名 密码 角色 模式 (1) 47.105.145.1 ...

  3. zabbix_agent自动发现服务端口

    应用背景:       zabbix监控系统介绍及安装,参考大牛运维生存时间,在这儿就不啰嗦了 为了zabbix-agent端能自动把服务器端的服务端口汇报给 zabbix server端,监控其端口 ...

  4. PAT 1093. Count PAT's

    The string APPAPT contains two PAT's as substrings. The first one is formed by the 2nd, the 4th, and ...

  5. [LeetCode] 887. Super Egg Drop 超级鸡蛋掉落

    You are given K eggs, and you have access to a building with N floors from 1 to N.  Each egg is iden ...

  6. 混合了RBAC和ACL的权限系统(二) -- 基于RBAC的系统权限

    http://fightplane.iteye.com/blog/1278464 1. 概念说明 A 系统级权限:从角色的角度出发,不特定于任何实际的资源的权限.比如“用户是否可以修改标题”这个权限, ...

  7. C# WPF 窗体传递消息

    对于存在窗体的WPF程序(或者说,起码在任务栏上有个图标,即ShowInTaskbar = true),互相传递消息是很容易的. 步骤: 1,寻找窗体的句柄 2,运用windows API: Send ...

  8. JavaScript中的call()和apply()方法,借此实现继承

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  9. Swift: 一句话获取虚拟机上APP所在的目录

    在XCode6上,虚拟机的App的存放位置发生了变化,通过下面语句,我们可以立即获得其所在的位置: println(NSTemporaryDirectory())

  10. EC2:将80端口直接转向8080端口

    当安装Tomcat后,需要将服务器的80端口直接指向8080端口,做法如下:1.    确认当前状态.在终端键入:netstat –ntl命令.输入结果应该和下面图片类似.可以看到8080端口处于监听 ...