css3 文本模型

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

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

<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;

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

时间： 2024-08-19 04:22:03

css3 文本模型的相关文章

CSS3文本温故

1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:text-shadow:none | <length> none | [<shadow>,] * <shadow>或none | <color> [,<color]*也就是:text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y

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

text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或

CSS3盒模型温故

CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.block.table.absolute position.float.浏览器把每个元素看做一个盒模型,每个盒模型是由以下几个属性组合所决定的:display.position.float.width.height.margin.paddinghe border等,不同类型的盒模型会产生不同的布局 什么是盒

据我知道有2个方法来定义标签文本模型领域;传统的方法和“编

背景据我知道有2个方法来定义标签文本模型领域;传统的方法和"编译时显示名称属性"的方法.在传统的方法中,文本被分配作为标签为每个模型字段中的HTML页面.虽然这是使用最简单的方法,它是最难的,当一个单一的模式字段中显示多个页面维护;你应该知道哪些页面领域已经出现进入并改变其标签中所有的人. 在"编译时显示名称属性"的方法,我们分配一个DisplayName特性对我们的模型的每个字段,然后使用Html.LabelFor在我们的HTML页面来显示它.当我们使用代码优先的

CSS自学笔记（10）:CSS3盒子模型

CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了一些新的模块,所以CSS3朝着模块化的方向发展. CSS3中比较重要的模块有:选择器.盒子模型.背景和边框.文字特效.2D/3D转换.动画.多列布局.用户界面. CSS3的选择器常用的和CSS选择器差不多. CSS3 盒子模型 盒子模型是CSS3很重要的一个模型,它是指元素以何种方式显示以及元素间如

CSS3 文本效果

1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px 5px red; 2 CSS3 自动换行在 CSS3 中,word-wrap 属性允许您允许文本强制文本 进行换行 ,对单词进行拆分:word-wrap:break-word; 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行. 4 text-emphasis 向元素的文本应用重点标记以

第 21 章 CSS3 文本效果

学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 CSS3 提供了 text-shadow 文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器支持情况. text-shadow Opera Firefox Chrome IE Safari 9.5+ 3.5+ 4+ 10+ 3.1+ 这里有几个注意点:1.text-shadow 在 CSS2 的时

CSS3文本效果

CSS3文本效果实例1: 文本阴影: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 文本阴影</title> <style> h1{text-shadow: 5px 5px 5px #FF0000;} </style> </head> <body> <h1>文本阴影效果

CSS3 盒子模型子元素居中效果

实现效果: 效果代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> //在这里只设了webkit内核的实现效果,如果想让其它浏览器支持居中效果那么请用它们的前缀 div{width:200px;height:20