如何在css中創建不改變大小的邊框？

Question

所以我有這樣的代碼：

<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%"> 
    text 
</h1> 

我怎樣才能讓一個邊界，如果我把一個較長的文字，我的邊框將保持其位置，並改變其大小，以使我的文字仍然在邊境？謝謝！

Answer 1

只是增加border: 1px solid black（例如）到你有什麼工作完全正常。該h1元素將擴大和縮小，以適應它的內容和邊框會也這樣做：

const result = document.getElementById('result'); 
 
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE..."; 
 

 
let index = 0; 
 

 
setInterval(() => { 
 
    index = (index % sentence.length) + 1; 
 

 
    result.innerHTML = sentence.slice(0, index); 
 
}, 250);

#result { 
 
    position:absolute; 
 
    top: 10%; 
 
    left: 10%; 
 
    padding: 0 .5rem; 
 
    font-family: Sans-Serif; 
 
    font-size: 2rem; 
 
    line-height: 3rem; 
 
    color: black; 
 
    border: 3px solid black; 
 
    border-radius: 3px; 
 
    min-height: 3rem; 
 
}

<h1 id="result"></h1>

無論如何，我懷疑你可能是指邊界更改元素的尺寸：

#bar1 { 
 
    width: 50%; 
 
    height: 1rem; 
 
    background: red; 
 
    margin: .25rem; 
 
} 
 

 
#bar2 { 
 
    width: 50%; 
 
    height: 1rem; 
 
    background: cyan; 
 
    margin: .25rem; 
 
    border: 3px solid black; 
 
}

<div id="bar1"></div> 
 
<div id="bar2"></div>

那因爲默認情況下，元素的width和height實際上是指定的width和height屬性的總和，加上padding加上border，正如您從上面的示例中看到的那樣。

如果是這樣的話，你有兩個選擇，以保持公正與width和height指定的尺寸：

• 使用box-sizing: border-box。這將使填充和邊框包含在元素的總寬度和高度中。

• 使用box-shadow而不是border。您可以使用inset屬性將陰影繪製到元素的內部而不是外部。

#bar1 { 
 
    width: 50%; 
 
    height: 1rem; 
 
    background: red; 
 
    margin: .25rem; 
 
} 
 

 
#bar2 { 
 
    width: 50%; 
 
    height: 1rem; 
 
    background: cyan; 
 
    margin: .25rem; 
 
    border: 3px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
#bar3 { 
 
    width: 50%; 
 
    height: 1rem; 
 
    background: yellow; 
 
    margin: .25rem; 
 
    box-shadow: inset 0 0 0 3px black; 
 
} 
 

 
#bar4 { 
 
    width: 50%; 
 
    height: 1rem; 
 
    background: lime; 
 
    margin: .25rem; 
 
    box-shadow: 0 0 0 3px black; 
 
}

<div id="bar1"></div> 
 
<div id="bar2"></div> 
 
<div id="bar3"></div> 
 
<div id="bar4"></div>

注意第4條中，一個與外box-shadow看起來更大，但如果你檢查它，它的尺寸完全一樣，那些在其他3個酒吧。

Answer 2

你能直接添加border: solid 1px black;到style屬性嗎？

<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>

小提琴：https://jsfiddle.net/myingling/LL57yd8j/

下面是關於CSS邊框一些閱讀：https://www.w3schools.com/css/css_border.asp