奇怪的文字大小（更改或缩放）

Question

更新

好的，所以在尝试答案Muszla提供

之后

看起来移动/小视图存在扩展问题。你可以看到文本大小设置为48px（这是我想要的），但在它上面你可以看到屏幕呈现57px。任何帮助搞清楚为什么会发生这种情况都会很棒！

更新前的问题

所以我有一个最奇怪的前端问题，将文本从20px更改为43.81px。它似乎取决于标题和内容的长度。快速字符计数我在内容部分需要276个字符才能正确调整大小。

如果我将以下示例Forgive me Father for I have sinned.............. "go on" says the priest. "I swore the other day" says the man. "continue" says the priest. "I was on the golf course the other day and i hit my drive, it was looking perfect, heading dead straight. About 200 yards down my ball更改为该示例，但在最后一个单词（也称为ball to bal）上只有一个l，那么它会缩小到下面的小尺寸。关于可能导致这个问题的任何指示都会很棒！

这是我的scss

%faq-base {
  font-family: "BentonSans Regular", "Helvetica", arial, sans-serif; // This needs to be implemented in the @font-face
  margin: 20px;
  -webkit-text-size-adjust: auto;
}

.title {
  @extend %faq-base;
}

.subtitle {
  @extend %faq-base;
  font-size: 20px
}

.faq {
  @extend %faq-base;
  margin: 30px;
  line-height: 20px;

  .question {
    font-size: 14px;
    font-weight: bold;
  }
  .answer {
    font-size: 12px;
    margin-left: 20px;
  }
}

a {
  color: #0091bb;
  text-decoration: none;
  outline: none;
}

这是视图

<%= stylesheet_link_tag 'application.css' %>
<p id="notice"><%= notice %></p>
<h2 class="subtitle"><%= @faq_category.name %></h2>
<div class="faq">
  <% @faq_category.faq_entries.each do |faq| %>
      <h3 class="question"><%= raw faq.question %></h3>
      <p class="answer"><%= raw faq.answer %></p>
  <% end %>
</div>

以下是错误操作，然后正确操作的示例。

Answer 1

它总会很奇怪。删除此：获取-webkit-text-size-adjust：auto; 并使用@media查询并为正确的窗口大小设置正确的字体大小：

示例：

@media screen and (max-width: 700px) {
  .subtitle {
    font-size: 20px;
  }
}
@media screen and (min-width: 701px) {
  .subtitle {
    font-size: 40px;
  }
}

您可以通过以下方式将文本换行到容器中：

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}