CSS3提供了丰富的排版效果,可以通过样式属性来控制文本的排列方式、字体样式、行高、字间距等。以下是一些常用的句子排版效果示例:

  1. 文本对齐方式:
.text-center {
text-align: center;
} .text-right {
text-align: right;
} .text-justify {
text-align: justify;
}
  1. 字体样式:
.text-bold {
font-weight: bold;
} .text-italic {
font-style: italic;
} .text-underline {
text-decoration: underline;
}
  1. 行高和字间距:
.line-height {
line-height: 1.5;
} .letter-spacing {
letter-spacing: 2px;
}
  1. 首字母大写:
.text-capitalize {
text-transform: capitalize;
}
  1. 文本阴影效果:
.text-shadow {
text-shadow: 2px 2px 4px #000000;
}
  1. 文本溢出省略号:

单行后文本溢出省略号

.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学习笔记-句子排版效果的更多相关文章

  1. 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 ...

  2. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  3. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  4. css3学习笔记之效果

    <!DOCTYPE html> <html> <head> <style> #t1 { border-radius: 15px; width:60px; ...

  5. CSS3学习笔记(5)—页面遮罩效果

    今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...

  6. [CSS3] 学习笔记-HTML与CSS简单页面效果实例

    一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...

  7. Bootstrap学习笔记(一) 排版

    Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码. 首先学习排版: 从Bootstrap网站下载Bootstrap3中文文档(V3.3 ...

  8. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  9. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  10. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

随机推荐

  1. Arduino Uno 引脚 –

    Arduino Uno 引脚 – Arduino Uno 板有 20 多个引脚,可用于许多不同的应用.在这篇文章中,我将为您提供 Arduino Uno 主要引脚的完整实用概述. 如果您刚开始使用 A ...

  2. 自己把源码生成jar,在android项目中调用

    项目源码下载地址 看了很多,找了很多,都是没有自己想要的效果的,不容易啊,备注下吧. 1.自己的源码 ,java文件,里边有各种方法,生成jar,可以分享给别人使用. 2.目前主要验证在android ...

  3. Java虚拟机(JVM):第一幕:起源,不一定全,但是一定靠谱

    在学习JVM之前,先分享一则信息:2009 年4月20日,Orace 宣布正式以74 亿美元的价格收购市值曾超过2000 亿美元的Sun公司,传奇的Sun Microsystems 从此落幕成为历史. ...

  4. options has an unknown property ‘contentBase‘

    options has an unknown property 'contentBase' 踩坑新版webpack-dev-serve 新版的contentBase取消了替代属性是static

  5. Apache协议原文及中文翻译

    Apache协议原文及中文翻译 参考链接 原文 Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TER ...

  6. Linux CMake编译kwindowsystem错误汇总

    1.APPSTREAMCLI-NOTFOUND 安装appstream apt-get install appstream 2.FISH_EXECUTABLE 安装fish apt-get insta ...

  7. 『STAOI』G - Round 1 半个游记

    很刺激. 挂个链接

  8. Java面向对象(高级)

    1.类变量 类变量是被类的所有实例共享的. 类变量具体放的位置在哪?在内存中的那个区域,这和jdk的版本是有关的 静态变量在类加载的时候就生成了,即使没有创建类实例也能访问,当然通过实例来实现 类变量 ...

  9. JAVA异常的不正确处理方式

    最近收到一个求助信息,异常堆栈如下: ``` java.lang.RuntimeException: FF1C1005 at test_ssh.sftp.Pool.get(Pool.java:25) ...

  10. 开发现代化的.NetCore控制台程序:(2)创建一个C#项目模板

    前言 上一篇文章(开发一个现代化的.NetCore控制台程序,包含依赖注入/配置/日志等要素)介绍了开发现代化的.NetCore控制台程序的细节,但这还不够,我又创建了一个脚手架模板,并命名为 Flu ...