Question

我正在创建一个显示用户地址的页面部分。地址可以显示的区域不是很宽，因此对于较长的地址，文本将换行到另一行。我希望文本只包装在“地址元素”的末尾，例如，如果用户的地址如下：

4, Long name street name Street, City name, Place, Imaginary Republic of Central Flaffapus

地址应该像这样包装：

4, Long name street name Street,
City name, Place,
Imaginary Republic of Central Flaffapus

但不是这样的：

4, Long name street name Street,
City name, Place, Imaginary
Republic of Central Flaffapus

也不是这样的：

4,
Long name street name Street,
City name,
Place,
Imaginary Republic of Central Flaffapus

我将如何实现这一目标？

Answer 1

您可以将non-breaking spaces  用于不希望它打破的空间，并为您想要允许打破的空间使用常规空格。

Answer 2

在完美的世界中，这是<wbr>标记的作业，表示a line-break opportunity。

浏览器兼容性为hit-or-miss。 IE从5.5到7支持它，但之后不支持。

Answer 3

如果格式一致，您可以将其拆分为逗号并添加<br>代码

var addr = "4, Long name street name Street, City name, Place, Imaginary Republic of Central Flaffapus".split(",");
addr[2]="<br>" + addr[2];
addr[4]="<br>" + addr[4];
myElement.innerHTML = addr.join(",");

或者使用正则表达式：

var addr = "4, Long name street name Street, City name, Place, Imaginary Republic of Central Flaffapus";
addr.replace(/([^,]*).([^,]*).([^,]*).([^,]*).([^,]*)/,"$1,$2,<br>$3,$4,<br>$5");

Answer 4

将<br>标记插入您希望其中断的行的末尾。

控制文本中自动换行的位置？

4 个答案: