zoukankan      html  css  js  c++  java
  • HTML元素里面多少种换行

    1.<br />

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>HTML换行显示的方式(<br /></title>
        </head>
        <body>
            <p>
                暴力真的可以解决一切,<br />帅真的可以当饭吃,<br />有钱真的可以为所欲为。
            </p>
        </body>
    </html>

    2.white-space: pre-line;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>HTML换行显示的方式(white-space: pre-line;)</title>
        </head>
        <body>
            <p style="white-space: pre-line;">
                暴力真的可以解决一切,
                帅真的可以当饭吃,
                有钱真的可以为所欲为。
            </p>
        </body>
    </html>

    3.white-space: pre;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>HTML换行显示的方式(white-space: pre;)</title>
        </head>
        <body>
            <p style="white-space: pre;">暴力真的可以解决一切,
    帅真的可以当饭吃,
    有钱真的可以为所欲为。</p>
        </body>
    </html>

    4.<pre></pre>

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>HTML换行显示的方式(<pre></pre></title>
        </head>
        <style>
            pre {
                white-space: pre-wrap;
                white-space: -moz-pre-wrap;
                white-space: -pre-wrap;
                white-space: -o-pre-wrap;
                *word-wrap: break-word;
                *white-space: normal;
                font-family: inherit
            }
        </style>
        <body>
            <pre>暴力真的可以解决一切,
    帅真的可以当饭吃,
    有钱真的可以为所欲为。</pre>
        </body>
    </html>

    5.<textarea></textarea>标签的占位符placeholder属性换行

    换行 (&#x000A;)  空格 (&#x0020;)  Tab (&#x0009;)  回车 (&#x000D;)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>HTML换行显示(placeholder)</title>
        </head>
        <body>
            <textarea rows="5" cols="40" placeholder="暴力真的可以解决一切,&#10;帅真的可以当饭吃,&#10;有钱真的可以为所欲为。"></textarea>
            <textarea rows="5" cols="40" placeholder="暴力真的可以解决一切,&#xA;帅真的可以当饭吃,&#xA;有钱真的可以为所欲为。"></textarea>
            <textarea rows="5" cols="40" placeholder="暴力真的可以解决一切,&#x000A;帅真的可以当饭吃,&#x000A;有钱真的可以为所欲为。"></textarea>
        </body>
    </html>

    6.<a></a>标签的提示内容title属性换行

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>HTML换行显示(title)</title>
        </head>
        <body>
            <a title="暴力真的可以解决一切,&#10;帅真的可以当饭吃,&#10;有钱真的可以为所欲为。">鼠标悬停提示消息</a>
        </body>
    </html>
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    Ubuntu
    VSCode
    VSCode
    Astyle
    Qt
    待办
    Qt
    Qt
    Qt
    python pip常用命令、配置pip源
  • 原文地址:https://www.cnblogs.com/antao/p/12882557.html
Copyright © 2011-2022 走看看