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

标签 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 中是否有可能导致此问题的原因?

最佳答案

h是一个 block 级元素,所以它会尝试占据父元素的整个宽度

使用 display:inline-block根据内容设置宽度和换行使用<br/>

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

关于javascript - HTML/CSS - 无论文本内容如何,​​所有文本元素都是 23 像素宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49063298/

相关文章:

javascript - 需要通过 JavaScript 访问本地文本文件

javascript - 使用特定列中的值过滤表

javascript - 如何在单击时隐藏一个 div 并显示另一个?

javascript - css 选择器 IE6,7 修复

html - 如何使用 flexbox 在 HTML 中排列多个包装列?

javascript - 我如何在一行函数中执行我的 jquery 悬停函数

javascript - Jest - 测试 try/catch

javascript - 隐藏从 iframe 加载的任何内容或元素

javascript - 如何在 React 中删除 Ant design Tabs 组件的焦点边框?

css - float : left not showing up after a certain point