CSS3学习笔记-句子排版效果
CSS3提供了丰富的排版效果,可以通过样式属性来控制文本的排列方式、字体样式、行高、字间距等。以下是一些常用的句子排版效果示例:
- 文本对齐方式:
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
- 字体样式:
.text-bold {
font-weight: bold;
}
.text-italic {
font-style: italic;
}
.text-underline {
text-decoration: underline;
}
- 行高和字间距:
.line-height {
line-height: 1.5;
}
.letter-spacing {
letter-spacing: 2px;
}
- 首字母大写:
.text-capitalize {
text-transform: capitalize;
}
- 文本阴影效果:
.text-shadow {
text-shadow: 2px 2px 4px #000000;
}
- 文本溢出省略号:
单行后文本溢出省略号
.text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
双行后文本溢出省略号
.text-ellipsis-2 {
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
以上只是一些常用的句子排版效果示例,你可以根据需要自由组合这些样式属性,实现更多个性化的排版效果。
CSS3学习笔记-句子排版效果的更多相关文章
- css3学习笔记之文本效果
CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- css3学习笔记之效果
<!DOCTYPE html> <html> <head> <style> #t1 { border-radius: 15px; width:60px; ...
- CSS3学习笔记(5)—页面遮罩效果
今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...
- [CSS3] 学习笔记-HTML与CSS简单页面效果实例
一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...
- Bootstrap学习笔记(一) 排版
Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码. 首先学习排版: 从Bootstrap网站下载Bootstrap3中文文档(V3.3 ...
- 十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
随机推荐
- Arduino Uno 引脚 –
Arduino Uno 引脚 – Arduino Uno 板有 20 多个引脚,可用于许多不同的应用.在这篇文章中,我将为您提供 Arduino Uno 主要引脚的完整实用概述. 如果您刚开始使用 A ...
- 自己把源码生成jar,在android项目中调用
项目源码下载地址 看了很多,找了很多,都是没有自己想要的效果的,不容易啊,备注下吧. 1.自己的源码 ,java文件,里边有各种方法,生成jar,可以分享给别人使用. 2.目前主要验证在android ...
- Java虚拟机(JVM):第一幕:起源,不一定全,但是一定靠谱
在学习JVM之前,先分享一则信息:2009 年4月20日,Orace 宣布正式以74 亿美元的价格收购市值曾超过2000 亿美元的Sun公司,传奇的Sun Microsystems 从此落幕成为历史. ...
- options has an unknown property ‘contentBase‘
options has an unknown property 'contentBase' 踩坑新版webpack-dev-serve 新版的contentBase取消了替代属性是static
- Apache协议原文及中文翻译
Apache协议原文及中文翻译 参考链接 原文 Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TER ...
- Linux CMake编译kwindowsystem错误汇总
1.APPSTREAMCLI-NOTFOUND 安装appstream apt-get install appstream 2.FISH_EXECUTABLE 安装fish apt-get insta ...
- 『STAOI』G - Round 1 半个游记
很刺激. 挂个链接
- Java面向对象(高级)
1.类变量 类变量是被类的所有实例共享的. 类变量具体放的位置在哪?在内存中的那个区域,这和jdk的版本是有关的 静态变量在类加载的时候就生成了,即使没有创建类实例也能访问,当然通过实例来实现 类变量 ...
- JAVA异常的不正确处理方式
最近收到一个求助信息,异常堆栈如下: ``` java.lang.RuntimeException: FF1C1005 at test_ssh.sftp.Pool.get(Pool.java:25) ...
- 开发现代化的.NetCore控制台程序:(2)创建一个C#项目模板
前言 上一篇文章(开发一个现代化的.NetCore控制台程序,包含依赖注入/配置/日志等要素)介绍了开发现代化的.NetCore控制台程序的细节,但这还不够,我又创建了一个脚手架模板,并命名为 Flu ...