如何在框中换行 + 更多

Question

我想知道如何将它放入一个彩色的圆形框中以使其从背景中弹出一点。 我将在下面提供我的目标图片 + 颜色：#23272a 或 rgb(35, 39, 42)

我在这里粘贴了我的 app.js：

let stockPriceElement = document.getElementById('shib-worth');
let lastPrice = null;

ws.onmessage = (event) => {
    let stockObject = JSON.parse(event.data);
    let price = parseFloat(stockObject.p).toFixed(8);
    let shib_start_price = 0.00003442;
    let shib_balance = 7263219;
    let shib_start_worth = shib_start_price * shib_balance;
    let shib_worth_now = price * shib_balance;
    let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73
    stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
    stockPriceElement.style.textAlign = "center";
    stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336';
    stockPriceElement.style.fontFamily = 'Sora', sans-serif;
    lastPrice = convert_shib_worth_to_gbp
};

我在这里粘贴了我的 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body style="background-color:rgb(44, 47, 51);">
<h1 id="shib-worth"></h1>
<script src="app.js"></script>
</body>
</html>

我还希望添加一个与数字对齐的静态“£”符号（在带有它的框内）以相同的字体但颜色为：白色

感谢和亲切的问候！

Answer 1

使用 css 类而不是样式属性，然后调查 border-radius。 对于您的 £，请考虑使用 CSS Pseudo 元素作为内容。

 body { background-color: #333; } .stock-price { /*Rounded corners*/ border-radius: 5px; /*The following is basic styling adjust as needed*/ padding: 10px; font-size: 16px; font-family: 'Sora', sans-serif; text-align: center; background-color: #666; margin: 6px; width: 100px; } /*Pseudo element for pound sign*/ .stock-price::before { content: '£'; color: white; } /*Classes to indicate price movement*/ .stock-price.no-change { color: #9e9e9e; } .stock-price.loss { color: #f44336; } .stock-price.gain { color: #4caf50; }

 <div class="stock-price no-change">123</div> <div class="stock-price loss">456</div> <div class="stock-price gain">123</div>

然后将您的 js 更新为（删除所有样式代码）：

stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
/*Add base class*/
stockPriceElement.classList.add('stock-price');
/*Add appropriate price movement class*/
stockPriceElement.classList.add(convert_shib_worth_to_gbp === shib_start_worth ? 'no-change' : convert_shib_worth_to_gbp > shib_start_worth ? 'gain' : 'loss');

Answer 2

正如@JonP 所提到的，您可以创建 CSS 类并删除 JavaScript 代码中的stockPriceElement.style.*使用。 只需使用stockPriceElement.classList.add()将您需要的类添加到该 DOM 元素。 要在每个股票价格的开头包含“£”图标，请创建一个::before伪元素并将该图标添加为其content属性。

 let stockPriceElement = document.getElementById('shib-worth'); let lastPrice = null; // `ws` wasn't defined in your code ws.onmessage = (event) => { let stockObject = JSON.parse(event.data); let price = parseFloat(stockObject.p).toFixed(8); let shib_start_price = 0.00003442; let shib_balance = 7263219; let shib_start_worth = shib_start_price * shib_balance; let shib_worth_now = price * shib_balance; let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73 stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2); // Add the text-align and font-family declaration // to a CSS class stockPriceElement.classList.add("stock-price"); // This could also be broken into separate color // classes to add/toggle based on the conditional logic stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336'; lastPrice = convert_shib_worth_to_gbp };

 :root { --grey: #9e9e9e; --green: #4caf50; --red: #f44336; } body { background-color: rgb(44, 47, 51); } .stock-price { padding: 10px 12px; text-align: center; font-size: 1.5rem; /* Vary this how you would like */ font-family: 'Sora', sans-serif; border-radius: 3px; color: var(--green); background: rgb(35, 38, 41); width: fit-content; -moz-width: fit-content; /* For Firefox */ } /* Create a Pseudo element to represent the icon */ .stock-price::before { content: "£"; color: #fff; margin-right: 4px; } .red { color: var(--red); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <h1 id="shib-worth" class="stock-price">377.41</h1> <h1 id="shib-worth" class="stock-price red">377.41</h1> </body> </html>

如何在框中换行 + 更多

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-11-01 23:32:36

解决方案2
1 2021-11-01 23:43:04

如何在框中换行 + 更多

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-11-01 23:32:36

解决方案2 1 2021-11-01 23:43:04

解决方案1
1 已采纳 2021-11-01 23:32:36

解决方案2
1 2021-11-01 23:43:04