Question

只是一个简单的问题 - 我在搜索时无法找到这个问题，但如果重复，我很抱歉。

我的段落标签包含了我网站的标题：

<div class = "title">
  <p>Welcome to homepage!</p>
</div>

<div class = "subtext"> 
  <p> Subtext goes here </p>
</div>

<div class = "formthing">
  <form method = "GET" action = "/form">
     <input type = "submit" name = "submitted" class = "btn-large" value = "Click button" />
  </form>
</div>

一切正常。但是，当我放大页面时，标题的单词会重叠。我可以添加什么来防止这种情况发生吗？

Answer 1

我在代码中看不到任何重叠，但快速修复可以通过css为您的类添加边距以防止重叠。

例如：

<style>
.formthing {
 margin: 0.25em;
}
</style>

Answer 2

您需要在CSS中使用em字体大小调整。如果您不知道这是什么，这是一篇非常好的文章：http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

基本上em只是表达百分比的另一种方式，但在使用pt，px和%值时，某些浏览器在更高和更低的缩放级别下会动摇。使用em可以最大限度地减轻这个问题。

font-size: 16px;
font-size: 100%;
font-size: 1em;

大多数现代浏览器默认使用16px字体大小作为控件并进行调整，使上述3种字体大小相互相等（在Firefox和IE中给出或取一些小数）。这不是万无一失的，但在大多数情况下会让你度过这些情况。这是一种非常广泛实践和证明的防止意外文本和元素重叠的方法。

另外 - 可能想查看您正在使用的字体以及是否应用了任何字距调整并可能使用letter-spacing: 1px;并进行相应调整。

不要忘记使用CSS重置，例如 Normalize.css 。

CSS中的文本重叠

2 个答案: