Question

我有三个段落（或只有一个但有换行符），如下所示：

line number one
line number two
line number three, longer.

现在，我希望这三条线在屏幕宽度时表现得像一条线（所以它可以在屏幕强制它的位置流畅地断开）达到较长线的那个。所以我自动结束了这样的事情：

line number one line  |
number two line number|
three, longer         |

（垂直线表示屏幕宽度）

换句话说：是否有一种方法可以让一个段落在屏幕宽度强制到达时正常运行（自然地断开），但是当屏幕宽度大于个体（并且最长）时保持其换行符）线？

Answer 1

除非段落中的标记可以更改，否则我看不到任何可行的解决方案。或者使用一些JS。

我现在能想到的最好的方法是设置一个media查询，该查询会删除宽度大于最长单行的<br/>标记，但不幸的是，此宽度必须修复。换句话说，如果您想在多个段落中使用它，则可能需要多个媒体查询。

下面的示例删除屏幕宽度大于250px的<br/>标记，这大约是最长行的宽度。结果是段落作为宽度大于250px的单行并且包裹它的自然包裹点。在250px及以下，它使用<br/>标签进行换行。

@media screen and (min-width: 250px) {
  p.break-250 > br {
    display: none;
  }
}

@media screen and (min-width: 500px) {
  p.break-500 > br {
    display: none;
  }
}

<p class="break-250">
  line number one<br/>
  line number two<br/>
  line number three, longer.
</p>

<p class="break-500">
  line number one line number one<br/>
  line number two line number two<br/>
  line number three, longer line number three, longer.
</p>

Answer 2

你可以给父div提供max-width，这样你的线就会自然地破坏

 

div{  
  max-width:160px;
}
p{
  text-align:justify:
}

<div>
<p>
line number one line  
number two line number
three, longer         
</p>
</div>

如何忽略仅在特定宽度以下的换行符

2 个答案: