CSS样式更改——文本Content

简介: CSS样式更改——文本Content

前言


上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法。


文本Content

1).首行缩进文本
<div style='text-indent:2em'></div>  可以设置负数 也可使用百分数 像素

2).文本对齐方式

<div style='text-align:center'></div>left   左边right   右边center  中间justify 两端对齐
3).字间距
<div style='word-spacing:2em'></div> 可以设置负数 也可使用百分数 像素

4).文本间距

<div style='letter-spacing:2em'></div> 可以设置负数 也可使用百分数 像素

5).文本转换

<div style='text-transform:none'></div>none         不转换uppercase    大写lowercase    小写capitalize   首字母大写
6).文本修饰
<div style='text-decoration:none'></div>none          不修饰underline     下划线overline      上划线line-through  中划线blink         文本闪烁
7).文本空白符的处理
<div style='white-space:normal'></div>pre-line 合并空白符序列,但是保留换行符normal   忽略空白符nowrap   文本不会换行,直到<br>出现才换行pre      空白会被浏览器保留pre-wrap 保留空白符序列,但是正常地进行换行
8).文本方向
<div style='direction:ltr'></div>ltr     从左到右rtl     从右到左
9).文本行高
<div style='line-height:2'></div> 可使用百分数 像素

10).文本阴影

<div style='text-shadow:1px 1px 1px red'></div>

11).字符换行

<div style='word-wrap:normal'></div>normal 只在允许的断字点换行break-word 在长单词、URL地址内部进行换行
12).处理溢出文本
<div style='text-overflow:ellipsis'></div>clip           修剪文本ellipsis      省略符号来代表被修剪的文本string        使用给定的字符串来代表被修剪的文本
13).文本轮廓
<div style='text-outline:1px 1px red'></div>

14).文本换行

<div style='text-wrap:none'></div>normal          只在允许的换行点进行换行。none            不换行。元素无法容纳的文本会溢出unrestricted    在任意两个字符间换行。suppress        压缩元素中的换行。浏览器只在行中没有其它有效换行点时进行换行

参考文档:W3C官方文档(CSS篇)


二、总结


这篇文章主要介绍了CSS样式更改篇中的文本Content基本设置,希望让大家对CSS样式更改有个简单的认识和了解。

相关文章
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
187 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
111 1
|
5月前
|
自然语言处理 前端开发 JavaScript
Playwright系列课(2) | 元素定位四大法宝:CSS/文本/XPath/语义化定位实战指南
本文是Playwright系列第二课,详解元素定位四大核心技术:CSS选择器、文本定位、XPath和语义化定位,结合实战演示各方法应用场景。重点解析Playwright智能定位器(Locator)的独特优势——自动等待与重试机制,通过预检元素可操作性(可见/可点击)有效规避网络延迟导致的脚本失效,显著提升自动化测试稳定性。
|
8月前
|
前端开发
|
10月前
|
前端开发
Css实现文本超出长度隐藏并用三个点结尾
Css实现文本超出长度隐藏并用三个点结尾
253 17
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
104 0
CSS3几何透明层文本悬停变色源码
|
前端开发
CSS文本加省略号
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82766836 ...
1070 0
|
前端开发 弹性计算
css文本超出2行就隐藏并且显示省略号
首先,要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得。
4963 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    228
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    220
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    159
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    130
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    269
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    398
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    175
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    111
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    187
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    257