让一行段落自下而上而不是自上而下的技巧

A trick to have line of paragraph go from bottom up and not from top down

本文关键字：自上而下 自下而上 段落 一行      更新时间：2023-09-26

我有一个关于零实际使用的愚蠢的小想法，我想知道如何使用HTML进行实践。通常，一个文本体被包装，横跨从封闭容器顶部向下依次排列的多行。就像这个方块报价：

任何熟悉缓存算法的人在阅读的描述时都会发出呻吟

"采样"；LRU。首先，LRU并不是很好——它是一个批量，总比什么都没有好，并且有一个合适的

大的缓存往往会掩盖缓存驱逐问题，但LRU仍然容易受到数量的影响

问题。过去的伪LRU redis适用于非常高速的缓存（它是

本质上是一个5路关联缓存），但在去磁盘时非常不合适，

访问延迟非常可怕。

另一方面，如果我想让行从封闭容器的底部向上，比如在这个块引号中，我的选择是什么？

访问延迟非常可怕。

本质上是一个5路关联缓存），但在去磁盘时非常不合适，

问题。过去的伪LRU redis适用于非常高速的缓存（它是

大的缓存往往会掩盖缓存驱逐问题，但LRU仍然容易受到数量的影响

"采样"；LRU。首先，LRU并不是很好——它是一个批量，总比什么都没有好，并且有一个合适的

任何熟悉缓存算法的人在阅读的描述时都会发出呻吟

从一开始就很明显，HTML+CSS没有实现这一点的机制。（对吗？）所以JS似乎是一条路要走，但由于行的开始和结束是由布局引擎决定的，我不能只是随机地将文本分成块，称之为行，反转并按顺序排列有没有一种方法可以利用布局引擎来获取线路的起点和终点

我不希望有一种实用的或技巧性的方法来做到这一点，并保留像img这样的东西仍然可以工作，或者动态font-size更改/响应布局在某种程度上是可能的。但这个想法对我来说太有趣了，所以我想知道我能走多远。

如果我能很好地理解你，那就很直接了。

你必须有像这样的HTML结构

<div class="text-cont">
   <p> Some line </p>
   <p> Some line </p>
</div>

所以段落定义了一行。为了简单起见，我使用了jquery，所以在你开始使用我的脚本之前，你必须有

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   ></script>

在html的<head>部分中。

现在js代码是：

$(document).ready(function(){
    $('.text-cont').click(function(){
        var newElementOrder = $('.text-cont').children().toArray().reverse();
    $('.text-cont').empty();
    for(var i=0;i<newElementOrder.length;i++){
      $('.text-cont').append(newElementOrder[i]);
    }
  });
});

这是一把小提琴https://jsfiddle.net/5nhr5L1s/

相关文章：