代码之家  ›  专栏  ›  技术社区  ›  jla

很长CSS列的分节符

  •  1
  • jla  · 技术社区  · 5 年前

    使用CSS列,我可以将连续的数据格式化成列,而无需手动将其分成部分。这在显示复杂的动态内容时特别有用。

    但是,如果列的内容太长,以致于其高度大于视区,则将列划分为多个列会导致阅读体验不佳。当读卡器到达一列的底部时,他们必须手动向上滚动以开始阅读下一列。

    在传统的打印布局中,很长的列的可读性问题通常通过将列分成“重新启动”列的部分来缓解。(物理页面本身形成了无休止滚动的网页所不具备的自然分隔)。下图显示了水平分段如何使长于视口高度的列内容更具可读性。

    enter image description here

    (请注意,通过“重新启动列”我的意思是,一旦到达左侧列部分的末尾,则在向下滚动以读取下一部分的两个列之前,先读取该部分的右侧列。 https://www.shutterstock.com/image-vector/newspaper-template... 可能会更清楚地说明这一点)。

    对列内容的保证很少。它可以包含任意数量的段落、图像、嵌套块元素、嵌套内联元素等。标记示例如下所示。

    .columns {
      columns: 2 200px;
    }
    .columns * {
      max-width: 100%;
    }
    <div class="columns">
      <div class="introduction">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere dictum tincidunt. Cras in lectus eget libero suscipit venenatis at sit amet dolor. Donec tempor cursus justo, volutpat sodales dolor tempor eu.</p>
        <p class="a-class">Pellentesque nec tempor sapien, sed vehicula sem. Ut pretium leo eget nisi cursus viverra. Ut ultrices porta nibh, sed laoreet felis condimentum sit amet. Aliquam a felis nec urna dignissim placerat sed sit amet elit. Donec elementum sagittis purus, facilisis convallis urna dapibus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Phasellus vel placerat metus. In efficitur enim eget lacinia ultrices. Duis ultricies dignissim nisi, id ultricies nulla venenatis vitae.</p>
      </div>
      <img src="https://i.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
      <div class="body" style="">
        <p>Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc. <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg" width="100"> Sed eu dapibus nulla. In ut libero sit amet elit elementum gravida. Suspendisse quis quam consequat, pretium felis vel, laoreet turpis. Proin fringilla lobortis magna. Duis quam sapien, sodales nec accumsan id, ullamcorper eget tellus. Aliquam vitae orci cursus, porttitor ligula ut, fringilla odio. Donec a lorem ac eros interdum varius ultricies quis nulla.</p>
      </div>
      <p contenteditable="true">Nunc in elit tincidunt, ultrices massa sed, ultricies elit. In nec accumsan metus. Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada.</p>
      <div style="display:none">
        <p>Curabitur sed hendrerit massa, vitae porta enim.</p>
      </div>
      <div><div><span>hey</span><div id="an-id">
        Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada. Nulla sed nisi vel nulla aliquam blandit. Nam vel tellus ut libero ultrices volutpat. Curabitur blandit quis arcu rutrum ullamcorper. Cras et pharetra augue, eget eleifend sem.
        <img src="https://socialnewsdaily.com/wp-content/uploads/2018/08/Webp.net-resizeimage-27.jpg">
      </div></div></div>
      <p>
        Mauris accumsan condimentum porttitor. Quisque tellus justo, suscipit sit amet posuere in, scelerisque nec orci. Aenean iaculis nisi in porta viverra. Sed eget ultricies nibh. Donec accumsan laoreet interdum. Donec risus mauris, dapibus et pulvinar at, posuere non nisi. Mauris at viverra nunc. Ut laoreet suscipit erat et cursus. Aenean id lacus volutpat lectus condimentum posuere. Nam ut lectus elit. Morbi sagittis elementum libero. Donec congue dolor sed tristique efficitur.
      </p>
      <p>
        <div>
          <p>Sed elementum velit sapien, et tristique justo bibendum at. Aliquam tincidunt magna nec nisi congue varius. Etiam dolor eros, rhoncus quis purus a, tempus malesuada quam. Sed bibendum condimentum eros vitae varius. Donec fermentum magna vel tellus tempus, nec finibus neque fermentum. Mauris tempus nisl sit amet lacus fermentum, at egestas urna egestas.</p>
          <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ultrices lectus vitae nisl congue, sed porta dolor luctus. Donec aliquet at sapien sit amet tincidunt. Mauris vestibulum consectetur augue at imperdiet.</p>
        </div>
      </p>
    </div>

    我希望在柱子达到最大高度后,将我的柱自动折断成规则的部分,如上图所示。

    我没有找到任何属性以这种方式控制CSS列的布局。CSS区域看起来很有前途,但对浏览器的支持非常差。

    用JavaScript计算内容的高度,然后为每个列块插入包装器可能是可能的,但并不理想。内容是动态的,可以随时更改,这意味着函数必须在每次更改时运行。此外,内容可能非常复杂,需要遍历分段的子元素,因此为每个分段插入包装器可能会破坏布局。

    如何在最大高度之后自动设置柱状内容的分段?(我并不赞同CSS列的想法;也许是对 flex inline-block 会给出我需要的结果。

    0 回复  |  直到 5 年前
        1
  •  5
  •   Bryce Howitson    5 年前

    实际上有一个非常简单的使用CSS列的解决方案。以及 column-span 属性。

    您可以实现所有这些,而无需在内容中注入任何内容,只需设置HTML标记的样式。

    基本上,CSS列布局模块 旨在复制打印设计布局 (像报纸一样)文体规则是标题应该横跨一篇报道的所有栏目。因此,任何元素 column-span: all 将分隔列并导致包装重置。(注意我的示例中的颜色显示了包装)。

    在这种情况下,由于您不控制内容,因此最好为用户提供一个公共结构。例如,我会设置 H1, H2, H3 标签以及 <hr> 也许还有一些图片可以用来打断列。 允许您的用户实现这些标签,因为他们通常会在写作,你会实现一个很好的布局。 然而,如果他们决定不实现任何这些东西,那就由他们决定,你应该让它包装起来,并引起一个长滚动。(我可能还建议提供一个预览,以便他们可以看到结果的样子)

    柱跨示例

    .columns {
    	margin: 30px;
    	columns: 2;
    }
    
    h1, h2, h3, h4, h5 {
    	column-span: all;
    }
    
    
    
    // simply to show where things wrap
    h2 {
    	background-color: #eee;
    	padding: 5px 10px;
    }
    
    h5 {
    	border-bottom: 1px solid #ddd;
    	padding-bottom: 5px;
    	text-align: center;
    }
    
    p:nth-of-type(1) {
    	color: blue;
    }
    
    p:nth-of-type(2) {
    	color: green;
    }
    
    p:nth-of-type(3) {
    	color: orange;
    }
    p:nth-of-type(4) {
    	color: teal;
    }
    <div class="columns">
    	<p>
    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis tellus non nunc tincidunt, vitae rutrum metus dapibus. Fusce at ante massa. Nam et nibh aliquet, porta nibh quis, rhoncus tortor. Aenean vestibulum neque sed urna lacinia aliquet.
    		Vestibulum facilisis egestas commodo. Cras sed maximus odio. Mauris posuere, ante id posuere facilisis, ligula libero consectetur lacus, at pellentesque nibh elit at magna. Proin sollicitudin quis nibh at viverra. Duis feugiat, lorem vitae facilisis
    		blandit, augue tortor cursus orci, sed porttitor eros elit at sapien. Quisque eleifend pulvinar pellentesque.
    	</p>
    
    	<h2>This is a header (h2) with column-span: all set on it</h2>
    
    	<p>
    		Donec blandit sapien leo, id aliquam purus vulputate a. Sed vel turpis ut eros suscipit blandit vel id eros. Nullam ut mauris luctus magna sollicitudin venenatis. Pellentesque leo mauris, malesuada nec purus ut, vestibulum malesuada lectus. Nullam ultricies
    		tellus sapien, ut fermentum risus pretium a. Nullam magna urna, ullamcorper non congue a, efficitur nec orci. Ut aliquam molestie nisi. In at accumsan purus. Etiam non tempor ipsum. Maecenas gravida mauris in nibh vehicula ullamcorper. Sed libero lorem,
    		faucibus eu lorem ut, gravida eleifend enim. Nunc vehicula fermentum consequat. Phasellus a pellentesque nisl. Nulla vel suscipit nibh, ac cursus dui. Suspendisse elementum dapibus risus. Nam egestas congue finibus.
    	</p>
    
    	<p>
    		Nunc vel risus nec nulla dignissim congue. Cras sit amet lacus nec nisl mollis pellentesque in vel purus. Suspendisse efficitur mollis nibh, congue facilisis libero auctor ac. Nulla facilisi. Etiam ut erat eget erat egestas suscipit. Curabitur vitae varius
    		mauris. Sed accumsan diam eros, id dapibus metus rutrum at. Nunc vitae pretium massa. Aenean quis mauris leo. Nulla egestas ligula eu libero interdum feugiat. Aliquam maximus erat et tortor auctor varius. Nulla in pharetra leo, vel suscipit nunc. Orci
    		varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec egestas ante, vitae sollicitudin arcu. Pellentesque posuere tempus nibh, nec tempus eros pellentesque ac.
    	</p>
    
    	<p>
    		Curabitur tempus massa dolor, nec congue purus efficitur id. Phasellus a dictum mauris. In porta nulla lectus, pretium semper erat semper id. Fusce ornare fringilla mi, ut auctor tortor semper non. Aliquam sed felis fermentum, molestie dolor vel, eleifend
    		diam. Donec accumsan bibendum mi, sed pretium tortor pulvinar nec. Aliquam et metus accumsan, pretium neque eu, elementum ipsum. Nam dapibus risus sed velit viverra, non consequat nibh pretium. Morbi nec gravida turpis. Quisque convallis justo ut rhoncus
    		porttitor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    	</p>
    	<h5>This is a header (h5) with column-span: all set on it</h5>
    	<p>
    		Proin fringilla, sapien molestie mattis commodo, leo ligula viverra massa, eget semper leo purus sit amet est. Quisque eu diam interdum, pretium dui sed, dictum sem. Sed cursus eu est in ultrices. Suspendisse eleifend imperdiet lectus eu consectetur.
    		Duis semper libero nec magna commodo, sollicitudin pharetra magna luctus. Fusce pellentesque sollicitudin dolor, eu scelerisque elit condimentum vel. Curabitur id condimentum nisi, eu rhoncus arcu. Proin metus purus, condimentum nec semper vitae, blandit
    		at leo. Proin commodo et ipsum ac euismod. Aliquam erat volutpat. Nam neque nisi, ornare sit amet metus ac, faucibus tempor nulla. Quisque tristique malesuada finibus. Praesent fermentum posuere urna, a blandit risus sollicitudin nec.
    	</p>
    
    </div>
        2
  •  1
  •   Omer    5 年前

    使用“break inside:avoid;”每个段落

    在我附加的解决方案中,我给每个DIV一个break-avoid类,以避免在段落中间打断。

    就像你问的,如果这个段落还没有结束,你可以向下滚动。我添加了一种灰色,你可以在段落中看到。

    您可以控制它何时断开,如果希望按顺序插入div,也可以将div插入到div中。

    希望解决方案对你有效。

    .columns {
      columns: 5 250px;
    }
    .columns * {
      max-width: 100%;
    }
    .break-avoid{
      break-inside: avoid;
      background-color: #ccc;
    }
    <div class="columns">
      <div class="introduction break-avoid">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere dictum tincidunt. Cras in lectus eget libero suscipit venenatis at sit amet dolor. Donec tempor cursus justo, volutpat sodales dolor tempor eu.</p>
        <p class="a-class">Pellentesque nec tempor sapien, sed vehicula sem. Ut pretium leo eget nisi cursus viverra. Ut ultrices porta nibh, sed laoreet felis condimentum sit amet. Aliquam a felis nec urna dignissim placerat sed sit amet elit. Donec elementum sagittis purus, facilisis convallis urna dapibus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Phasellus vel placerat metus. In efficitur enim eget lacinia ultrices. Duis ultricies dignissim nisi, id ultricies nulla venenatis vitae.</p>
      </div>
      <img src="https://i.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
      <div class="body break-avoid" style="">
        <div>
        <p>Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc.Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc.Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc.Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc. <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg" width="100"> Sed eu dapibus nulla. In ut libero sit amet elit elementum gravida. Suspendisse quis quam consequat, pretium felis vel, laoreet turpis. Proin fringilla lobortis magna. Duis quam sapien, sodales nec accumsan id, ullamcorper eget tellus. Aliquam vitae orci cursus, porttitor ligula ut, fringilla odio. Donec a lorem ac eros interdum varius ultricies quis nulla.</p>
        </div>
      </div>
      <p class="break-avoid" contenteditable="true">Nunc in elit tincidunt, ultrices massa sed, ultricies elit. In nec accumsan metus. Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada.</p>
      <div style="display:none;" class="break-avoid">
        <p>Curabitur sed hendrerit massa, vitae porta enim.</p>
      </div>
      <div class="break-avoid"><div><span>hey</span><div id="an-id">
        Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada. Nulla sed nisi vel nulla aliquam blandit. Nam vel tellus ut libero ultrices volutpat. Curabitur blandit quis arcu rutrum ullamcorper. Cras et pharetra augue, eget eleifend sem.
        <img src="https://socialnewsdaily.com/wp-content/uploads/2018/08/Webp.net-resizeimage-27.jpg">
      </div></div></div>
      <div class="break-avoid">
      <p>
        Mauris accumsan condimentum porttitor. Quisque tellus justo, suscipit sit amet posuere in, scelerisque nec orci. Aenean iaculis nisi in porta viverra. Sed eget ultricies nibh. Donec accumsan laoreet interdum. Donec risus mauris, dapibus et pulvinar at, posuere non nisi. Mauris at viverra nunc. Ut laoreet suscipit erat et cursus. Aenean id lacus volutpat lectus condimentum posuere. Nam ut lectus elit. Morbi sagittis elementum libero. Donec congue dolor sed tristique efficitur.
      </p>
     </div>
        <div class="break-avoid">
          <p>Sed elementum velit sapien, et tristique justo bibendum at. Aliquam tincidunt magna nec nisi congue varius. Etiam dolor eros, rhoncus quis purus a, tempus malesuada quam. Sed bibendum condimentum eros vitae varius. Donec fermentum magna vel tellus tempus, nec finibus neque fermentum. Mauris tempus nisl sit amet lacus fermentum, at egestas urna egestas.</p>
          <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ultrices lectus vitae nisl congue, sed porta dolor luctus. Donec aliquet at sapien sit amet tincidunt. Mauris vestibulum consectetur augue at imperdiet.</p>
        </div>
      
    </div>