CSS 顯示傷害命令 在游戲開發中，經常需要在界面上顯示各種操作信息。例如，在 RPG 游戲中，戰斗中角色的傷害和治療值就需要顯示在屏幕上，以幫助玩家實時了解戰斗情況。CSS 提供了多種方式來顯示文本內容，其中 pre 標簽是一種特殊的標簽，可以保留文本中的空格和換行符，非常適合顯示代碼和格式化文本。 首先，我們創建一個 div 元素用于顯示傷害命令： ``` HTML``` 接著，使用 CSS 樣式設置 div 元素的樣式： ``` CSS #damage-output { background-color: black; color: white; font-family: monospace; font-size: 14px; padding: 5px; margin: 10px 0; height: 100px; overflow-y: scroll; } ``` 上述 CSS 樣式設置了 div 元素的背景顏色為黑色，字體顏色為白色，使用等寬字體 monospace，并設置字體大小和內部間距。此外，還設置了 div 元素的高度和垂直滾動條，以便顯示大量文本信息。 最后，我們使用 JavaScript 來向 div 元素中添加傷害命令： ``` JavaScript var output = document.getElementById("damage-output"); output.textContent += "Player attacked for 10 damage!\n"; output.textContent += "Enemy attacked for 5 damage!\n"; ``` 上述代碼通過獲取 id 為 damage-output 的 div 元素，并使用 textContent 屬性向其中添加文本內容。注意，我們在文本末尾添加了 \n 換行符，以確保新的傷害命令顯示在新一行上。 通過以上代碼，我們實現了使用 CSS 顯示傷害命令的功能。pre 標簽的作用在此得到了充分展示，它保留了文本中的空格和換行符，使得文本更加易讀易懂，為游戲中數據展示帶來便利。