1

我在段落元素中有一段文本，其中包含以下 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”向下移动一行，将“帮助”向下移动一行以分散单词密度。

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

在此处输入图像描述

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

问题：

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

4

3 回答 3

1

浏览器在微调排版方面很糟糕。充分的理由使文本更难为用户阅读，一般来说，应该避免。

不同的浏览器和操作系统对文本的呈现方式会略有不同，并且无法保证文本会在您期望的位置换行。您最终可能会自己修理它并在其他地方制动。试图对此进行微观管理是徒劳的。

见： http: //nedbatchelder.com/blog/200806/bad_web_typography_full_justify.html

于 2013-08-14T19:31:18.353 回答
1

我根据 Jongware 的评论找到了一个解决方案。

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

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

于 2013-08-14T19:49:38.653 回答
1

更好的解决方案是使用多个元素。取你想要换行的地方，并将这些部分分成单独的部分。

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

文字不变：

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.

于 2017-04-13T18:50:13.333 回答