<!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>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本对齐,段落中超出屏幕部分文字自动换行的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：段落中超出屏幕部分不换行

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本右对齐

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本居中对齐

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本左对齐

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：可滚动

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设置浮动和偏移

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：将所有列表项放置同一行

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：移除默认的列表样式

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定引用右对齐

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

随机推荐

  1. 508，css优先级算法如何计算？

    优先级就近原则,同权情况下样式定义最近者为准 载入样式以最后载入的定位为准 优先级:!important>id > class >tag;  !important比内联优先级高 (百 ...

  2. C 语言实例 - 判断闰年

    用户输入年份,判断该年份是否为闰年. #include <stdio.h> int main() { int year; printf("输入年份: "); scanf ...

  3. 「JSOI2015」地铁线路

    「JSOI2015」地铁线路 传送门 第一问很简单:对于每条线路建一个点,然后所有该条线路覆盖的点向它连边,权值为 \(1\) ,然后它向所有线路上的点连边,权值为 \(0\) . 然后,跑一边最短路 ...

  4. 「JSOI2015」套娃

    「JSOI2015」套娃 传送门 考虑贪心. 首先我们假设所有的套娃都互相不套. 然后我们考虑合并两个套娃 \(i\),\(j\) 假设我们把 \(i\) 套到 \(j\) 里面去,那么就可以减少 \ ...

  5. 喵星之旅-狂奔的兔子-rabbitmq的java客户端使用入门

    一.简介 RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件). 消息队列都涉及的生产者消费者模型,不做详解,本文只作为快速使用的参考文档. 消息队列主要有点 ...

  6. 攻防世界 你知道什么是cookie吗？

    打开题目链接,提示我们查看cookie,cookie是HTTP协议中的一个重要参数,(对HTTP协议不是很熟悉的friends可以看看这个“HTTP协议其实就是这么简单”) 查看cookie的方法有很 ...

  7. eclipse好用的快捷键

    eclipse一些增加工作效率的快捷键(部分自己添加) eclipse如何修改快捷键 1. shift + enter | ctrl + shift + enter 在下/上方增加空行 2. ctrl ...

  8. type和object详解

    python中的type和object详解   关于这篇博客 这篇博客主要描述Python的新风格对象(new-style objects),如下: <type 'type'>和<t ...

  9. Chrome无法从该网站添加应用，扩展程序和用户脚本

    #开始 更新谷歌浏览器之后发现不能通过本地 crx文件安装离线插件了 网上找到的方法有两种 一个就是通过添加浏览器参数解决 但是这个方法我尝试之后失败了 第二个方法就是用工具安装 具体如何太麻烦了就没 ...

  10. mysql事务管理及spring声明式事务中主动异常抛出使数据库回滚

    mysql的引擎常用的有两个,一个MyISAM,另一个是InnoDB,mysql默认的为MyISAM,而InnoDB才是支持事务的.所以一般需要修改下,如何修改就不说了. 事务需要依赖数据库,好久没使 ...