css break-inside

The break-inside CSS property sets how page, column, or region breaks should behave inside a generated box. If there is no generated box, the property is ignored.

侵入式CSS属性设置页面，列或区域分隔符在生成的框内应如何表现。如果没有生成的框，则忽略该属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside



/* Keyword values */

break-inside: auto;

break-inside: avoid;

break-inside: avoid-page;

break-inside: avoid-column;

break-inside: avoid-region;

/* Global values */

break-inside: inherit;

break-inside: initial;

break-inside: unset;

CSS multi-column layout

https://caniuse.com/?search=css multi columns

CSS Multi-column Layout Module Level 1, W3C Working Draft, 15 October 2019

https://www.w3.org/TR/css-multicol-1/

demos

See the Pen Pure CSS waterfall grid by xgqfrms
(@xgqfrms) on CodePen.

refs

https://css-tricks.com/almanac/properties/b/break-inside/



-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */

page-break-inside: avoid; /* Firefox */

break-inside: avoid; /* IE 10+ */

https://www.w3schools.com/cssref/pr_break-inside.asp

@media print {

  img {

    display: block;

    break-inside: avoid;

  }

}

https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element

https://www.w3.org/TR/css-multicol-1/#break-inside

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

css break-inside的更多相关文章

  1. 【CSS】其他CSS属性和特性

    1. 设置元素的颜色和透明度 前面有介绍CSS颜色的各种用法,如 background-color属性.boder-color属性等.还有另外两个与颜色有关的属性. 1.1 设置前景色 color属性 ...

  2. 前端开发【第2篇：CSS】

    鸡血 样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它. Css初识 HTML的诞生 早期只有HTML的时候为了让HTML更美观一点,当时页面的开发者会把颜色写到 ...

  3. CSS 列表实例

    CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志.CSS 列表属性(list)属性 描述list-style 简写属性.用于把所有用于列表的属性设置于一个声明中.list-styl ...

  4. CSS 实用实例

    背景颜色 1. 颜色背景 <style type="text/css">body { font-size: 16px;">h1 { font-size: ...

  5. js文件 与 css文件 异步加载

    使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...

  6. Web服务器(CassiniDev的裁减版)

    做此程序的原因是将软件部署简化,省去IIS的麻烦部署,减少项目实施人员的工作量和工作复杂度 Server sv = , "/", @"D:\web", IPAd ...

  7. markdown的流程图实现和代码语法着色

    用flowchart为markdown添加流程图 举个例子如下,根据这个例子大家就能看懂我到底是怎么实现的 <!DOCTYPE html> <html> <head> ...

  8. CodeMirror mode编写

    Writing CodeMirror Modes Modes typically consist of a single JavaScript file. This file defines, in ...

  9. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

  10. php 生成word的三种方式

    原文地址 http://www.jb51.net/article/97253.htm 最近工作遇到关于生成word的问题 现在总结一下生成word的三种方法. btw:好像只要是标题带PHP的貌似点击 ...

随机推荐

  1. SQL Server 邮箱告警配置

    目录 配置数据库邮件 * 手动启用数据库邮件功能 * 配置数据库邮件 * 测试数据库邮件 实现 JOB 任务运行状态的检测 * 定义操作员 * 新建死锁警报 * 设置 SQL Server 代理 创建 ...

  2. redis中的小秘密和持久化小细节

    https://www.jianshu.com/p/36c301ac87df 持久化的情况 https://www.cnblogs.com/wdliu/p/9377278.html 集群搭建 主从  ...

  3. 从零开始学Java （五）条件选择

    if switch while do while for break continue 这块对于有语言基础的人来说可以跳过了. 注意有个equals方法. 1 public class Main { ...

  4. 通过 JFR 与日志深入探索 JVM - TLAB 原理详解

    全系列目录:通过 JFR 与日志深入探索 JVM - 总览篇 什么是 TLAB? TLAB(Thread Local Allocation Buffer)线程本地分配缓存区,这是一个线程专用的内存分配 ...

  5. IDEA中jdk设置

    电脑运行环境是8, 但是IDEA提醒说1.5已经过时,IDEA中jdk设置还是比较麻烦 https://blog.csdn.net/u012365843/article/details/8138883 ...

  6. HBase协处理器加载过程（1.2.x）

    一.首先来看ObserverCoprocessor:1.观察者协处理器的静态加载的配置是在hbase-site.xml中配置如下属性:通过hbase.coprocessor.region.classe ...

  7. kafka的演进历史

    首先如果我开始做一个消息队列,最开始的时候可能就是一台单机上的一个单一的log日志,不断地向这个日志中追加消息即可. 后来,可能由于一个log日志支撑不了太多的读写请求,于是就对这个log日志进行了拆 ...

  8. File类以及IO流

    1.File类 package LESSON12; import java.io.File; import java.io.IOException; import java.text.SimpleDa ...

  9. Windows10 ping通 虚拟机上的Linux-CentOS7操作系统

    我是按照Oracle VM VirtualBox 安装CentOS7操作系统这个博客安装Linux操作系统的. 我们这里只关心网卡的配置,网卡一: 网卡二: 我按照上面那个博客安装Linux操作系统之 ...

  10. Codeforces Global Round 7 D1. Prefix-Suffix Palindrome (Easy version)（字符串）

    题意: 取一字符串不相交的前缀和后缀(可为空)构成最长回文串. 思路: 先从两边取对称的前后缀,之后再取余下字符串较长的回文前缀或后缀. #include <bits/stdc++.h> ...