在CodePen中打开
CSS是了不起的，使用老式和现代CSS的混合，我们可以快速定义灵活的、牢不可破的盒子
这个blockquote 的演示首先利用了我们的响应式填充理念，使填充在盒子弯曲到不同大小时_感觉恰到好处_。盒子的大小是通过使用min() 函数设置宽度来控制的。随着盒子的增大和缩小，min() 将选择所提供的数值中的_最小值_，从而形成一个大视口有max-width _，_小视口有max-width 的盒子。
然后我们添加一些属性，以确保长文本值不会破坏盒子，包括word-break 和hyphens （注意 hyphens并非在所有语言中都适用）。)
最后，footer 用fit-content 来设置其宽度，就像我们在之前的访问样式演示中使用的那样。这使得在你还需要设置一个display ！的情况下，这是一个替代换成inline 显示值的好办法。
.smol-unbreakable-box { --color-light:#E0D4F6; --color-dark:#675883; margin: 2rem auto; color: var(-color-dark); background-color: var(-color-light); font-size: 1.15rem; /* Smol Responsive Padding FTW!*/ padding: clamp(.75rem, 3%, 2rem); /* 提供最大宽度并防止溢出 */ width: min(50ch, 90%); /* 帮助防止长的单词/名字/URL溢出 */ word-break: break-word; /* 可选，并非所有语言都支持 */ hyphens: auto; } .smol-unbreakable-box footer { padding:0.25em 0.5em; margin-top: 1rem; color: var(-color-light); background-color: var(-color-dark); font-size: 0.9rem; /*创建一个缩小到`max-content`的视觉框 */ width: fit-content; } 适用于 "Smol灵活的牢不可破的盒子 "的CSS
.smol-unbreakable-box { --color-light: #E0D4F6; --color-dark: #675883; margin: 2rem auto; color: var(--color-dark); background-color: var(--color-light); font-size: 1.15rem; /* Smol Responsive Padding FTW! */ padding: clamp(.75rem, 3%, 2rem); /* Provide a max-width and prevent overflow */ width: min(50ch, 90%); /* Help prevent overflow of long words/names/URLs */ word-break: break-word; /* Optional, not supported for all languages */ hyphens: auto;}.smol-unbreakable-box footer { padding: 0.25em 0.5em; margin-top: 1rem; color: var(--color-light); background-color: var(--color-dark); font-size: 0.9rem; /* Creates a visual box shrunk to `max-content` */ width: fit-content;}
Topping candy canes ice cream gummi bears gingerbread marshmallow.巧克力蛋糕粉糖梅花浇头。蛋糕 棉花糖 胡萝卜蛋糕馅饼甘草甘草甜甜的tootsie roll caramels donut dragée熊爪。巧克力粉糖葫芦。
-糖果队长
关于更广泛的信息和另一个创建灵活的、牢不可破的盒子的例子，请查看这个ModernCSS教程--Developing For Imperfect。未来的CSS样式
