css渲染(二) 文本

一、文本样式

 首行缩进  text-indent

  首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格。[注意]该属性可以为负值;应用于: 块级元素(包括block和inline-block) 

        <div><p style="text-indent: 2em">亚冠联赛是亚洲最高等级的俱乐部赛事</p><p>相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯</p></div>

字间隔  word-spacing

  字间隔是指单词间距,用来设置文字或单词之间的间距。[注意]字间隔可为负值;单词之间的间距 = word-spacing 空格大小;必须加空格才生效

    <div><div style="width: 100px;">购买数量:</div><div style="width: 100px;word-spacing: 27px">运 费:</div></div>

字母间隔 letter-spacing

  字母间隔是指字符间距,[注意]字母间隔可为负值

<div style="width: 200px;letter-spacing: 5px">购买数量:</div>

文本转换 text-transform

  文本转换用于处理英文的大小写转换

  值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

  初始值: none

<div style="text-transform: uppercase">test one</div>

文本修饰 text-decoration

  文本修饰用于为文本提供修饰线  [注意]文本修饰线的颜色与文本颜色相同

  值: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

  初始值: none

<div style="text-decoration: underline">test one</div>

 空白符  white-space

  空白符是指空格、制表符和回车;HTML默认已经把所有空白符合并成一个空格

white-space

  值: normal | nowrap | pre | pre-wrap | pre-line | inherit

  初始值: normal

normal: 合并空白符,允许自动换行
nowrap: 合并空白符,不允许自动换行
pre-line: 合并空白符(不包括换行符),允许自动换行
pre: 不合并空白符,不允许自动换行
pre-wrap: 不合并空白符,允许自动换行(在pre基础上,保留自动换行) 
    <div style="width: 200px;white-space: nowrap">They can stay 72-hourswithin the Shandong      province after they have entered China via the Qingdao International Airport.</div>

 

文本换行 word-wrap

  浏览器自身带有文本自动换行的功能,文本容器的右侧可以实现自动换行

  对于英文来说,浏览器会在半角空格或连字符的地方自动换行,而不会在单词的中间突然换行

  对于中文来说,可以在任何一个文字后面换行,但浏览器碰到标点符号时,通常将标点符号以及其前一个文字作为一个整体进行换行。

word-wrap

  word-wrap属性用来实现长单词或URL地址的自动换行

  值: normal | break-word

  初始值: normal

word-wrap:normal(浏览器只在半角空格或连字符的地方进行换行)
word-wrap:break-word(截断单词换行,长单词从下一行开始)

  [注意]当white-space的值是nowrap或pre时,word-break和word-wrap属性都失效

    <div style="width: 50px; word-wrap: break-word">abcfffffffffffffffffffjkl</div>

 不加的时候            加了的时候

        

 

二、文本溢出  text-overflow

    <div class="text">长英文fffffffffffffffffff</div>
        .text{width: 80px;background: red;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

不加的时候          加了的时候

      

 

三、文本阴影  text-shadow

  类似于盒子阴影,文本阴影也有x轴偏移、y轴偏移、模糊半径和阴影颜色这四个值,但是并没有阴影尺寸和内部阴影这两个值

text-shadow

  值: none | (h-shadow v-shadow blur color)

  初始值: none

h-shadow: 水平阴影位置(必须)
v-shadow: 垂直阴影位置(必须)
blur:     模糊距离(该值不能为负值,可选)
color:    阴影颜色,默认和文本颜色一致(可选) 
<div class="text">测试文字</div>
        .text{width: 100px;height: 100px;text-shadow: 2px 2px 3px green;}

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

28岁学python转行_28岁转行程序员,学Java还是Python?码农:想快点月薪过万就选它...

为什么要学Java&#xff1f;Python给人的印象简单是因为我们在用Python的时候&#xff0c;可以直接调用别人已经写好的代码接口就可以&#xff0c;相对于傻瓜模式&#xff0c;Java的许多处理都要原生很多&#xff0c;写的代码可能会多一些&#xff0c;但一旦完成封装&#xff0…

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置&#xff0c;块挨着块&#xff0c;块嵌套块&#xff0c;块叠着块。 三种关系&#xff1a;相邻&#xff0c;嵌套&#xff0c;重叠。 下面介绍网页布局的常用几种方式 1.一列布局&#xff1a; 一般都是固定的宽高&#xff0c;设置margin : 0 auto来水…

变量声明declare,简单运算符运算,变量测试与内容替换

declare -/ 选项 变量名 - 设类型 取消类型 -i 设为整型 -x 设为环境变量 -p 显示类型属性&#xff08;property&#xff09; [rootlocalhost ~]# a1 [rootlocalhost ~]# declare -p a declare -- a"1" [rootlocalhost ~]# export a [rootlocalhost ~]# declare -p …

如何水平居中一个元素

在项目中经常会遇到居中问题&#xff0c;这里借鉴度娘的众多答案&#xff0c;做一个总结&#xff1a; 一、元素的水平居中 1、行级元素的水平居中 <div style"width: 200px;height: 100px;border: 1px solid cyan; text-align: center;"><span>行级元素…

Yammer Metrics,一种监视应用程序的新方法

当您运行诸如Web应用程序之类的长期应用程序时&#xff0c;最好了解一些关于它们的统计信息&#xff0c;例如&#xff0c;服务的请求数&#xff0c;请求持续时间或活动请求数。 但是还有一些更通用的信息&#xff0c;例如内部集合的状态&#xff0c;代码的某些部分被执行了多少…

mysql教程目录_MySql目录(二)

MySql索引(二) 转自&#xff1a; http://www.cnblogs.com/dreamhome/archive/2013/04/16/3025304.html 所有MySQL列类型可以被索引。根据存储引擎定义每个表的最大索引数和最大索引长度。 所有存储引擎支持每个表至少16个索引&#xff0c;总索引长度至少为256字节。大多数存储引…

solr和Lucene的配置方式和应用

solr字段类型 类说明BinaryField二进制数据BoolField布尔值&#xff0c;其中’t’/’T’/’1’都是trueCollationFiled支持Unicode排序CurrencyField支持货币和汇率DateRangeFiled支持索引date rangeExternamFiledFiledpull磁盘上的文件EnumField支持定义枚举值ICUCollationFie…

CSS——清除浮动的六种解决方案

内容的高度撑起父元素容器的高度&#xff0c;效果图如下HTML和CSS代码如下给&#xff50;标签加上浮动以后&#xff0c;&#xff50;&#xff5b;float&#xff1a;left&#xff1b;&#xff5d;&#xff0c;此时DIV塌陷&#xff0c;两段内容同行显示&#xff0c;效果如下&…

40个Java Collections面试问答

Java Collections Framework是Java编程语言的基本方面。 这是Java面试问题的重要主题之一。 在这里&#xff0c;我列出了Java集合框架的一些重要问题和解答。 什么是Java Collections Framework&#xff1f; 列出Collections框架的一些好处&#xff1f; 集合框架中泛型的好处…

AtCoder Beginner Contest 084(AB)

A - New Year 题目链接&#xff1a;https://abc084.contest.atcoder.jp/tasks/abc084_a Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement How many hours do we have until New Year at M oclock (24-hour notation) on 30th, December? Cons…

等待正确的时刻–集成测试

当您必须测试多线程程序时&#xff0c;总是需要等到系统达到特定状态后&#xff0c;测试才能验证是否达到了正确的状态。 这样做的通常方法是在系统中插入一个“探针”&#xff0c;该探针将向同步原语发出信号 &#xff08;例如Semaphore &#xff09;&#xff0c;并且测试将一…

网络编程---黏包

基于UDP协议的socket udp的server 不需要进行监听也不需要建立连接&#xff0c;在启动服务之后只能被动的等待客户端发送消息过来。 客户端发送消息的同时还会 自带地址信息&#xff0c;消息回复的时候 不仅需要发送消息 还需把对方的地址填上。 udp的client 不需要connect 因为…

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height 在CSS中&#xff0c;可以对任何块级元素设置显式高度。 如果指定高度大于显示内容所需高度&#xff0c;多余的高度会产生一个视觉效果&#xff0c;就好像有额外的内边距一样&#xff1b; 如果指定高度小于显示内容所需高度&#xff0c;取决于…

Extjs 下拉框

刚刚熟练了easyui控件的使用&#xff0c;又開始了如今的这个项目。这个项目是个半成品。前端使用的是Extjs控件&#xff0c;jsp中没有代码。就引用了非常多的js。。。于是乎有种不知所措了呀。。。 说实话特别的不想去看那些代码&#xff0c;第一是不熟悉&#xff0c;第二是太乱…

python输入代码界面通常_vscode写python时的代码错误提醒和自动格式化的方法

python的代码错误检查通常用pep8、pylint和flake8&#xff0c;自动格式化代码通常用autopep8、yapf、black。这些工具均可以利用pip进行安装&#xff0c;这里介绍传统的利用pip.exe安装和在VScode中安装两种方式。【温馨提醒】要使用flake8或要想flake8等工具起作用&#xff0c…

java编译找不到符号_关于久违的Javac,编译出现“找不到符号”

参考文档&#xff1a;http://blog.csdn.net/qq369201191/article/details/49946609工作以来习惯了maven编译&#xff0c;已经忘记了javac这个东东&#xff0c;以至于遇到javac问题时困惑了&#xff0c;下面总结一下&#xff0c;以便后者参考。一、使用javac进行项目java文件编译…

某些小时后MySql连接自动掉线

MySql配置为删除任何闲置超过8小时的连接。 这意味着什么&#xff1f; 在8个小时的间隔后返回到已部署的应用程序之后&#xff08;如果未更改默认SQL参数&#xff09;&#xff0c;将会遇到异常情况。 如何解决这个问题&#xff1f; 增加wait_time参数-不是一个好主意&#xff…

shopxx 阿里云OSS设置

shopxx 使用文档没有啊&#xff0c;只能自己看了 数据中心 字段其实是 EndPoint字段 URL前缀 是 图片服务器的主机地址。这个在阿里云回传的时候是不带的。 对应 阿里OSS 外网域名 转载于:https://www.cnblogs.com/nanahome/p/7346641.html

我的HTML总结之常用基础便签

HTML&#xff1a;是Hyper Text Markup Language&#xff08;超级文本标记语言&#xff09;的缩写&#xff0c;HTML不是一种程序&#xff0c;只是一种控制网页中数据显示的标识语言。 HTML由一组标签组成。 HTML的基本结构 <html> <head> <title>第一个HTML示…

您是否应该信任JVM中的默认设置?

如今&#xff0c;JVM被认为是智能的。 预期不会进行太多配置–只需设置要在启动脚本中使用的最大堆&#xff0c;您就可以进行了。 所有其他默认设置都很好。 大概我们当中有些人误以为。 实际上&#xff0c;在运行时期间发生了很多事情&#xff0c;无法自动调整性能&#xff0c…