文本从下到上换行
有人知道我如何从下到上以相反的顺序包装文本吗？我附上了一个示例图像。
[
][http://i.stack.imgur.com/RVsIG.jpg]
我需要从下到上刹车，这样底线是满的，顶线是不完整的，而不是在它满了之后打破线，在最后有一条不完整的线。
回答 8
Stack Overflow用户
发布于 2014-11-23 21:47:58
我不建议使用奇特的CSS属性，因为Chrome和Firefox中还没有这个属性。最好的跨浏览器解决方案是在文档加载时在Javascript中处理此问题。以下是如何做到这一点的草图：
$(function() {
$(".title").each(function(i,title) {
var width = 0;
var originalHeight = $(title).height();
var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
while (originalHeight == $(title).height()) {
spacer.width( ++width );
}
spacer.width( --width );
});
});Working JSFiddle在这里：http://jsfiddle.net/zephod/hfuu3m49/1/
Stack Overflow用户
发布于 2015-01-20 22:29:37
对于它，没有通用的css解决方案。你必须利用任何语言的帮助。这是使用PHP的解决方案之一：
<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>Stack Overflow用户
发布于 2020-08-20 18:44:17
6年后，但不要烦恼！我找到了一个纯CSS解决方案！
事实证明，您可以使用flexbox实现此结果，但这并不明显，也不是非常直接。这就是我开始时的想法：
我希望标题是“底部重的”，与你在问题中描述的效果相同。
我首先用空格拆分字符串，并为每个字符串分配一个父级。通过使用flex-wrap: wrap-reverse和align-content: flex-start。您将实现以下目标：
哦不！现在订单被打乱了！诀窍来了。通过颠倒您向HTML添加跨度的顺序和使用' flex - direction : row-reverse‘的flex的方向顺序，您实际上实现了您想要的“金字塔形状”向上溢出效果。
下面是我的(简化的)代码，使用react和react-bootstrap：
<Row className='d-flex flex-wrap-reverse flex-row-reverse align-content-start'>
{props.deck.name
.split(' ')
.reverse()
.map(word => (
<span className='mr-1'>{word}</span>
))}
</Row>https://stackoverflow.com/questions/22423951
复制相似问题