技術標籤：android html 不換行 字型縮小了

當我們在定義列表時，我們通常想得到如下的效果：

下面是我們的html程式碼：

實際得到的效果是

當我們想得到最上面的效果時，第一步通常是：

因為

    dd, dt{      display: inline;    }

解決方案

如上，我們缺少幾個換行

實際上有一個Unicode字元專門代表換行符：0x000A。在CSS中，我們可以用"A"表示，我們可以把它作為::after偽元素的內容，新增到dd的尾部，但是你會發現並沒有什麼作用，但這並不代表我們錯了，而是在HTML程式碼中，預設情況下換行符會與相鄰的其他空白符進行合併

    dd, dt{      display: inline;    }    dd::after{      content: "A";      white-space: pre;    }    dd{      margin: 0;      font-weight: bold;    }

很明顯，我們已經得到了我們想要的效果，不過如果我們嘗試如下時：

由於我們在每個dd後面都加了一個換行符，每個值都會分到單獨一行，甚至不需要換行的時候也是如此。因此我們需要採取類似if else的判斷：

    dd + dt::before{      content: "A";      white-space: pre;    }    dd + dd::before{      content: ', ';      font-weight: normal;      margin-left: -.25em;    }

另外上述的margin是為了修正逗號前的空格，尺寸是需要根據字型個尺寸除錯的。