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加上{{ 1}}，正如您从上面的例子中看到的那样。

如果是这种情况，您有两种方法可以保持尺寸与border和width一致：

使用box-sizing: border-box。这将使填充和边框包含在元素的总宽度和高度中。
使用box-shadow代替height。您可以使用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;
}

注意第4个栏，外部<div id="bar1"></div> <div id="bar2"></div> <div id="bar3"></div> <div id="bar4"></div>的栏看起来更大，但如果你检查它，它的尺寸与其他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

如何在css中创建一个不改变大小的边框？

2 个答案: