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

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

<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. Dispatch Queues 线程池

    Dispatch Queues Dispatch queues are a C-based mechanism for executing custom tasks. A dispatch queue ...

  2. [HNOI2004]宠物收养所 题解

    一杯茶,一包烟,一道水题调一天 题面 这题一眼看上去就是个裸板子对吧 本来以为要两棵splay,读了一下题发现店里只能有一种生物(人/宠物) 所以记录一下当前店里的状态就行了 老年手速20min过编译 ...

  3. [SQL Server] 常用sql脚本

    1.添加表 GO IF NOT EXISTS(SELECT * FROM sys.tables WHERE name='table_name') BEGIN CREATE TABLE [dbo].[t ...

  4. 比n大的最小不重复数

    void Calculate(int a) { int pa = a; ; ] = {}; //将pa按位存储到数组b ) { b[count++] = pa%; pa = pa/; } bool f ...

  5. POJ——3169Layout（差分约束）

    POJ——3169Layout Layout Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14702   Accepted ...

  6. CentOS 7安装JDK 1.8

    1. 首先查看当前Linux系统是否安装Java ``` rpm -qa | grep java ``` 2. 如果列表显示有,则使用命令将其卸载 rpm -e --nodeps 要卸载的软件名 或 ...

  7. 【Codeforces 467C】George and Job

    [链接] 我是链接,点我呀:) [题意] 让你从1..n这n个数字中 选出来k个不相交的长度为m的区间 然后这个k个区间的和最大 求出这k个区间的和的最大值 [题解] 设dp[i][j]表示前i个数字 ...

  8. window.parent与window.opener、window.showModalDialog的区别 opener和showModalDialog刷新父页面的方法

    项目中使用案例: 父窗体 <s:form namespace="/forexagent" id="listSearchForm" name="t ...

  9. js中DOMContentLoaded和load的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  10. MapReduce编程实战之“高级特性”

    本篇介绍MapReduce的一些高级特性,如计数器.数据集的排序和连接.计数器是一种收集作业统计信息的有效手段.排序是MapReduce的核心技术,MapReduce也可以运行大型数据集间的" ...