Question

有人知道如何以相反的顺序从下到上包装文本？我附上了一个示例图片。

在完成并且末尾有一条不完整的线之后，我不需要断线，我需要以某种方式从下到上制动，因此底线是满的，顶线是不完整的。

Answer 1

我不建议使用奇怪的CSS属性，即使在Chrome和＆amp;还没有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 );
    });
});

工作JSFiddle在这里：http://jsfiddle.net/zephod/hfuu3m49/1/

Answer 2

没有通用的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);
?>

Answer 3

好吧，如果这取决于文本，那么你可以尝试像单词替换器。例如

var words = "This is what I want to achieve";
var newWords.replace("what", "what <br />"); // note the line break
document.write(newWords);

这是一个小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/

否则，我认为你不能根据一行中的字符数来划分一行。

Answer 4

Wrap和Nowrap将由客户端浏览器呈现，因此您无法强制浏览器从下到上进行换行。但你可以用javascript或asp。

来做到这一点

Answer 5

这不是解决此问题的正式方法。但看看这是否有帮助。

HTML CODE

<div id="mydiv">
I can imagine the logic behind the code having to detect what is the last line, detect the div size, and the font size... then measure how many characters it can fit and finally go to the above line and insert the break where necessary. Some font families might make this harder, but trial and error should solve the issue once the basic code is set..
</div>

CSS：

#mydiv
{
    width:1000px;
    line-height:18px;
    font-size:20px;
    text-align:justify;
    word-break:break-all;
}

这里将div宽度设置为font-size的50倍左右，可以得到精确的结果。其他宽度值或字体值可能会使最后一行略微迷惑，在最后一个字符后面留出一些空格。（无法解决该部分）。

JQuery的：

$(document).ready(function(){
        //GET the total height of the element
        var height = $('#mydiv').outerHeight();

        //Get the height of each line, which is set in CSS
        var lineheight = $('#mydiv').css('line-height');

        //Divide The total height by line height to get the no of lines.
        var globalHeight = parseInt(height)/parseInt(lineheight);
        var myContent = $('#mydiv').html();
        var quotient = 0;

        //As long as no of lines does not increase, keep looping.
        while(quotient<=globalHeight)
        {
            //Add tiny single blank space to the div's beginning
            $('#mydiv').html('&#8239;'+myContent);

            //Get the new height of line and height of div and get the new no of lines and loop again.
            height = $('#mydiv').outerHeight();
            lineheight = $('#mydiv').css('line-height');
            quotient = parseInt(height)/parseInt(lineheight);
            myContent = $('#mydiv').html();
        }
        //get the final div content after exiting the loop.
        var myString = $('#mydiv').html();

        //This is to remove the extra space, which will put the last chars to a new line.
        var newString = myString.substr(1); 
        $('#mydiv').html(newString);
    });

Answer 6

如果您已经知道要在哪里进行休息，只需使用简单的HTML中断来破坏您的内容并让它以您想要的方式显示。

<p>This is what<br/>
want to acheive with your help</p>

如果您手动设置休息时间（并且您知道它们希望它们在哪里中断），那么请自行创建它们。

您还可以尝试根据您看到的不喜欢的屏幕尺寸设置单独的CSS宽度调整，并设置@media引用以使div宽度更小以打破文本，因此它不会。 t在特定尺寸设备的顶部不均匀地运行。

Answer 7

在文本display: inline-block;上使用div。

Answer 8

6年后，但不用担心！我找到了一个纯CSS解决方案！

事实证明，使用flexbox可以实现此结果，但这并不明显或非常简单。这是我开始的目的：

我希望标题是“沉重的”，与您在问题中描述的效果相同。

我首先用空格分割字符串，然后给每个字符串一个父级。通过使用flex-wrap：wrap-reverse和align-content：flex-start。您将实现以下目标：

哦，不！现在，订单混乱了！诀窍来了。通过用“ flex-direction：row-reverse”反转在HTML中添加跨度的顺序和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>

从下到上换行文字

8 个答案: