如何为合理的文本添加换行符？

Question

我在段落元素中有一个带有以下css的文本块：

p {
    text-align: justify;
    text-align-last: left;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

以下是文字：

DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.

结果如下：

我不喜欢的是“今天的运营和财政”界限之间的距离。我想将'a'向下移动一行，将'help'向下移动一行以分散单词密度。

问题： 在单词“a”和“help”之前添加<br />时，我会得到以下内容：

现在文本块的左边缘不是齐平的。

问题：

如何强制单词在下一行而不调整文本块的大小？

Answer 1

浏览器是微调排版的废话。完全理由使文本HARDER能够为用户阅读，并且通常应该避免使用。

不同的浏览器和操作系统会略微不同地呈现文本，并且无法保证文本无论如何都会将其包装到您期望的位置。您最终可能会为自己修理并在其他地方制动它。试图微观管理这是一项徒劳无功的工作。

请参阅：http://nedbatchelder.com/blog/200806/bad_web_typography_full_justify.html

Answer 2

我找到了一个基于Jongware评论的解决方案。

我使用了(word at end of one line)<nobr>&nbsp;(word at start of next line)。

它将两个单词粘在一起，两个单词都添加到第二行，看起来很棒。

Answer 3

更好的解决方案是使用多个元素。选择您想要换行的地方，并将这些部分分成不同的部分。

一旦它们是单独的部分，它们就可以显示在一列中，看起来它们都是一个元素。

文字未经改动：

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: left;
}

<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.</p>

使用换行符：

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: left;
}

<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over <br/>a decade of field experience DRG is uniquely positioned to <br/>help customers succeed in today’s operational and fiscal environment.</p>

使用单独的部分：

p { 
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.text {
  width: 400px;
  text-align: justify;
  text-align-last: justify; /* not really the last line */
}
/* The last line of the last p, should use left alignment */
.text.last {
  text-align-last: left;
}

<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over</p><p class="text">a decade of field experience DRG is uniquely positioned to </p><p class="text last">help customers succeed in today’s operational and fiscal environment.