HTML / CSS - 无论文本内容如何,​​所有文本元素都是23像素宽

时间:2018-03-02 05:28:44

标签: javascript html css text width

我有一些文字元素(h1),由于某些原因它们都是相同的宽度,即使它们中有不同的文字。

HTML:

<h1 class="main-text" id="one">text</h1>
<h1 class="main-text" id="two">texttextext</h1>
<h1 class="main-text" id="three">texttextexttexttextext</h1>

CSS:

.main-text {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #848484;
  font-family: "Roboto";
  font-size: 40px;
}

出于某种原因,当我运行以下JS代码时:

console.log(document.getElementById("one").offsetWidth)
console.log(document.getElementById("two").offsetWidth)
console.log(document.getElementById("three").offsetWidth)

所有这些都记录为23。我的屏幕宽度是1920px,如果这有帮助。我的CSS中是否有可能导致此问题的内容?

2 个答案:

答案 0 :(得分:1)

GregorianCalendar gc = new GregorianCalendar(); gc.setTimeInMillis(System.currentTimeMillis()); gc.add(Calendar.MINUTE, -5); System.out.println(new java.util.Date().getTime()); System.out.println(new java.util.Date(gc.getTime().getTime()).getTime());是块级元素,因此会尝试占用父级的全宽

使用h根据内容设置宽度,并使用换行符display:inline-block

&#13;
&#13;
<br/>
&#13;
console.log(document.getElementById("one").offsetWidth)
console.log(document.getElementById("two").offsetWidth)
console.log(document.getElementById("three").offsetWidth)
&#13;
.main-text {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #848484;
  font-family: "Roboto";
  font-size: 40px;
  display: inline-block;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

所以这发生了,因为h1是块级元素。如果您将display:inline-block添加到CSS中,您会看到偏移量的差异。使用默认的display:block元素将填充页面的宽度,即使您将其推高超过50%然后重置它。