<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"><h2>排版</h2><p class="text-left">左对齐文本</p><p class="text-right">右对齐文本</p> <p class="text-center">居中对齐文本</p><p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p> <p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p><p><strong>提示:</strong> 尝试重置浏览器大写查看 “text-justify” 和 “text-nowrap” 段落的效果。</p> </div></body> </html>
![[html] 如何实现多行文字梯形排版？](https://img-blog.csdnimg.cn/20210310164352885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MjQ4OQ==,size_16,color_FFFFFF,t_70)
