如何使用CSS组合显式换行符和对齐文本

Question

我使用HTML和CSS发布一些诗歌，这些诗歌结合了特定的，明确的换行符和理由。所以，我需要实现像这样的图像，每一行都在它显示的位置被打破：

但是，如果存在换行符，<p style="text-align: justify;"> Bacon ipsum dolor amet andouille<br /> meatloaf rump meatball, shank ribeye<br /> jowl turkey swine. Drumstick tri-tip<br /> brisket, cupim tongue andouille chuck<br /> spare ribs. Bresaola cow drumstick,<br /> tail boudin ground round sausage<br /> kielbasa prosciutto turkey andouille<br /> jowl spare ribs. Short ribs brisket.<br /> </p>似乎不起作用，例如：

＆＃13;

＆＃13;

package MainFunction;


public class Main {

public static void main(String[] args) {
    // TODO Auto-generated method stub
    Gun m_one = new Gun("M1", 30, ["Bleeding"], "semi-auto", ".15 cal", "lead", 8);
    System.out.println("Java Works.");
}

}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将br转换为span，在文本片段之间插入空行。

然后你可以将line-height减少到大约一半，所以跨度不会在一条完整线的高度上扩展。

将合理的width设置为p

span {
  /* add an extra line */
  display: inline-block;
  width: 100%;
}
p {
  /* reduce line-height to half to include spans */
  line-height: 0.6em;
  /* set a reasonnable width */
  width: 15em;
  text-align: justify;
}

<p>
  Bacon ipsum dolor amet andouille<span></span>
  meatloaf rump meatball, shank ribeye<span></span>
  jowl turkey swine. Drumstick tri-tip<span></span>
  brisket, cupim tongue andouille chuck<span></span>
  spare ribs. Bresaola cow drumstick,<span></span>
  tail boudin ground round sausage<span></span>
  kielbasa prosciutto turkey andouille<span></span>
  jowl spare ribs. Short ribs brisket.<span></span>
</p>

Answer 2

检查一下，尝试在整页中运行代码段，这是有效的HTML和响应。

div.col-50 {
  width: 50%;
  /* set a minimum width to avoid line breaks on small screen or try @media query */
  min-width: 350px;
}
p.justify-all {
  text-align: justify;
  line-height: 1em;
  font-size: 1.2em;
  font-family: Cambria, "Times New Roman", "Lucida Bright";
}
p.justify-all > span.ph {
  /* set a place holder */
  display: inline-block;
  width: 100%;
}
p.justify-all > span.red {
  color: red;
}
p.justify-all > span.green {
  color: green;
}

<div class="col-50">
  <p class="justify-all">
    Bacon ipsum <span class="red">dolor</span> amet andouille<span class="ph"></span>
    meatloaf rump meatball, shank ribeye<span class="ph"></span>
    jowl turkey swine. <b>Drumstick tri-tip</b><span class="ph"></span>
    brisket, cupim tongue andouille chuck<span class="ph"></span>
    spare ribs. <span class="green"><b>Bresaola</b> cow</span> drumstick,<span class="ph"></span>
    tail boudin ground round sausage<span class="ph"></span>
    <span class="red">kielbasa <i>prosciutto</i></span> turkey andouille<span class="ph"></span>
    jowl spare ribs. Short ribs brisket.<span class="ph"></span>
  </p>
</div>

以下是jsfiddle

的另一个例子

  

注意：如果可能，请使用span.bold，span.italic而不是<b>＆amp; <i>个标签   因为他们可以使内容的本地化变得困难。   参考：http://www.w3.org/International/questions/qa-b-and-i-tags