我在指定宽度的div中有一个动态标题。
给定一个标题"；你好，世界，我叫鲍勃&"；，div宽度将使行在"；name"；，给我：
你好，世界，我的名字
是鲍勃
有没有一种简单的方法可以颠倒断线行为，使其在"断开"后断线；你好"；，因此：
你好
世界，我叫鲍勃
也就是说，这是一种确保顶线总是短线的方法。
或
保持两条线路长度相似的方法：
你好，世界，
我叫鲍勃
我正在开发一个wp主题，所以最好是一个在wordpress中默认的解决方案(我不想添加插件(，或者可以在PHP、HTML、CSS或JS 中完成的东西
理想情况下，这将通过CSS解决，这样浏览器就可以处理所有布局流的更改。但我相信CSS中最接近的东西是text-align: justify;，它不会影响文本行的换行位置，只影响行中空间的分布方式。
使用PHP(或任何服务器端语言(的解决方案都不是一个好主意，因为它将无法考虑文本容器的宽度，而文本容器的大小会因每个用户的视口而异。你可以试着猜测，但你可能会在大约一半的时间里出错，这些用户要么会在错误的地方看到一堆额外的换行符，要么会看到没有使用可用全宽的文本。
这意味着您需要使用JavaScript来实现这一点，但这会有几个缺点。您需要手动插入换行符，这意味着一旦JavaScript能够运行，文本将在初始加载后回流。根据用户的互联网连接和设备速度，这可能会延迟到足以导致元素在光标下方移动的程度。
您还需要在容器大小发生变化时重新运行此代码，删除多余的换行符并引入新的换行符。您可以使用像ResizeObserver这样的API来监视这些更改并对其做出响应，但当用户调整视口大小时(例如，如果他们在横向和纵向模式之间切换手机(，这可能会导致明显的回流。
但很明显，这些都是非常重要的缺点，可能会影响主题的美学。你到底想解决什么问题？你可能会采取一种不同的方法来避免这些缺点吗？
我发现了一种方法！在做了更多的谷歌搜索之后；换行：反转"我有没有发现像我这样的问题。
最有用的是使用js解决方案从下到上包装文本，尽管也有一些挑剔之处。
但在搜索之后，出现了一个使用css flexbox的更新解决方案。虽然我没有使用react，但我使用了flexbox的想法，并在php中构建了一个简单的解决方案：
$title = get_the_title($post->ID);
$splitTitle = explode(' ', $title);
if(strlen($splitTitle[0]) < 3){
$splitTitle[0] = $splitTitle[0]." ".$splitTitle[1];
unset($splitTitle[1]);
}
$reversedTitle = array_reverse($splitTitle);
foreach($reversedTitle as $word){
echo "<span> ".$word."</span>";
}
我不想要像"；A"；或"；一个"；单独放在第一行，所以我检查这些，并将它们放在一个字符串中，放回数组中。
然后，我只是将flexbox样式应用于父div：
.title {
display: flex;
flex-wrap: wrap-reverse;
align-content: flex-end;
flex-direction: row-reverse;
justify-content: flex-end;
}