在設計網頁時，我們經常需要控制一個元素的字數和行數，以便在不影響排版的同時，更好地呈現內容。這個時候，CSS就是我們的好幫手。 對于控制字數，我們可以使用CSS的text-overflow屬性。這個屬性有三個值可選，分別是： 1. ellipsis：用省略號表示被截斷的文本 2. clip：簡單地隱藏被截斷的文本 3. string：用指定的字符串來表示被截斷的文本 我們可以通過以下代碼實現控制字數的效果：

p {
white-space: nowrap; /* 禁止換行 */
overflow: hidden; /* 超出部分隱藏 */
text-overflow: ellipsis; /* 被隱藏部分用省略號表示 */
width: 200px; /* 寬度為200px，可以根據需求調整 */
}

這樣，當p標簽中的文本超過200個字符時，就會被截斷并用省略號表示。 而控制行數，則可以使用CSS的line-clamp屬性。這個屬性可以指定一個元素的文本行數，多出的文本會被截斷并用省略號表示。 然而，由于line-clamp屬性目前只被少數瀏覽器支持，我們需要結合一些其他屬性來實現該效果。以下是一個例子：

p {
display: -webkit-box; /* 舊版webkit內核實現方式 */
-webkit-box-orient: vertical; /* 設置為垂直方向 */
-webkit-line-clamp: 3; /* 顯示前三行 */
overflow: hidden; /* 超出部分隱藏 */
text-overflow: ellipsis; /* 截斷部分用省略號表示 */
width: 200px; /* 寬度為200px，可以根據需求調整 */
}

在這個例子中，我們通過向p標簽添加一些舊版webkit內核的屬性，來實現控制行數的效果。當p標簽中的文本超過三行時，超出的文本就會被截斷并用省略號表示。 通過合理運用CSS的text-overflow和line-clamp屬性，我們可以輕松地控制一個元素的字數和行數，使網頁更美觀、更易讀。