使用css将第一行文本以一定宽度断开

7ajki6be  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(140)

是否可以在第一行以一定宽度中断文本,而在第二行不中断?
例如,打断下面的文本 “Is it possible to break a text at some width for the first line and no break for the second line” 像这样第一行:-Is it possible to break a text第二行:-at some width for the first line and no break for the second line”

o8x7eapl

o8x7eapl1#

你可以在第二行空格的位置放上“非中断空格”。它会让他们在一起。

at some width for the first line and no break for the second line
jk9hmnmh

jk9hmnmh2#

您可以在文本之前添加一个不可见的(=没有内容,边框或背景)右浮动元素,使用height: 1emwidth: calc(100% - 300px),您可以将px值调整为第一个文本行的所需宽度:

.x {
  float: right;
  width: calc(100% - 300px);
  height: 1em;
  border: 1px dotted #ddd;
}
<div class="x"></div>
<p>Is it possible to break a text at some width for the first line and no break for the second line. Is it possible to break a text at some width for the first line and no break for the second line. Is it possible to break a text at some width for the first line and no break for the second line. Is it possible to break a text at some width for the first line and no break for the second line.</p>

注意:我为浮动元素创建了一个非常浅的边框,以使其可见,但您可以简单地删除该边框设置以保持元素不可见。

相关问题