需求：使用一層HTML標籤實現如下效果

效果圖

套路圖

這是從“ CSS的世界 ”中學來的（P2​​3），大神就是大神，熟練掌握著css各種屬性的特性。

以下是程式碼：  

<span class="ao"></span>
<span class="tu"></span>

.ao,
.tu {
    display: inline-block;
    width: 0;
    font-size: 14px;
    line-height: 18px;
    margin: 35px;
    color: #fff;
}
.ao:before,
.tu:before {
    outline: 2px solid #cd0000;
    font-family: Consolas, Monaco, monospace;
}
.ao:before {
    content: "love你love";
}
.tu {
    direction: rtl;
}
.tu:before {
    content: "我love你";
}
 

原理：這是顯示：內聯塊;的“首選最小寬度”屬性，即當元素寬度：0;時，元素的寬度由文字/圖片決定。

    文字最小寬度原則：

        1.東亞文字（如中文），最小寬度是每個漢字的寬度，如例子所示。

        2.西文，由特定的連續的英文字元單元決定，一般終止於空格，短橫線，問號及其他非英文字元等，可以自己修改程式碼感受一下（可以用字元：盈虧所有;實現每一個字元都是最小單位）。

        3.圖片就是圖片寬啦。

此部分更深層次知識涉及寬度：汽車;及內部尺寸與流體特性（都是張老師的專業術語），感興趣可以自行查閱。

PS（一小部分讀後感）：可能你會覺得整個職業生涯中都不會有這樣的需求，常用的效果我們都能實現，知道這個特性有什麼用其實這只是一個小小的例子，來讓讀者明白他的效果，真正的意義在於你明白整個寬度的特性之後（哎），你的程式碼會更精煉，可讀性強，可維護性強...整體來說就是程式碼優化，提高開發效率。