html——P标签 文字超出省略、 首字下沉效果 和 两端对齐

1、P标签：

块级标签
垂直居中方式：

• height = line-height
• display: table; vertical-align: middle;

text-indent：首行缩进属性
letter-spacing：字间距设置（中文）
word-spacing：字间距设置（英文）
spacing设置则 text-align: center; 出现问题 解决方法：

letter-spacing: 60px;
text-indent: 60px;

2、文字超出省略：

单行：

overflow:hidden;
text-overflow:ellipsis; /* 加省略号 */
white-space:nowrap; /* 强制不换行 */

text-overflow：
clip 修剪文本。 测试
ellipsis 显示省略符号来代表被修剪的文本。 测试
string 使用给定的字符串来代表被修剪的文本。

white-space： 用来设置如何处理元素内的空白，也可以来规定段落中的文本是否换行，它的值必须设置为nowrap，否则text-overflow属性失效。
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示三行，后面省略 */
overflow: hidden;

3、首字下沉效果

<style>
        p {
            width: 300px;
        }

        p::first-letter {
            font-size: 30px;
            margin-right: 5px;
            color: brown;
            float: left; /*文字环绕*/
        }
</style>

<p>霓虹在傍晚的时候缓缓的升起，同时也印在淋湿了的地板上。红的，黄的，绿的，彩色的。透过半开的窗，传来嘀嗒—嘀嗒的雨落下的声音。风，也悄悄的过来了，很冷。我起身，关上了窗。</p>

两端对齐

text-align: justify;

&::after {
	display: inline-block;
	width: 100%;
	content: '';
}