5 篇博文含有标签「CSS」

查看所有标签

word-break 和 overflow-wrap

2024年4月11日 · 阅读需 6 分钟

主要描述浏览器中文本换行，以及对比 word-break 和 overflow-wrap 这两个CSS属性在防止文本溢出上的效果.

父元素宽度自适应子元素宽度

2024年2月5日 · 阅读需 2 分钟

默认情况下，一个 div 元素的宽度是父容器内容的 100%，哪怕这个 div 的子元素的宽度超出了。

可以看到下面这个示例，container 的背景色并不是和内容等宽的。

实时编辑器

function Scrollable() {
  const styleScrollable = {
    height: '100px',
    backgroundColor: 'antiquewhite',
    overflow: 'auto'
  }

  const styleContainer = {
    // width: 'max-content',
    height: '50px',
    display: 'flex',
    alignItems: 'center',
    backgroundColor: 'lightblue',
    gap: '20px',
  }

  const styleItem = {
    flexGrow: '1',
    flexShrink: '0',
    // flexBasis: '200px',
    width: '200px',
    backgroundColor: 'cadetblue',
  }

  return (
    <div class="scrollable" style={styleScrollable}>
      <p>scrollable</p>

      <div class="container" style={styleContainer}>
        <div style={styleItem}>item</div>
        <div style={styleItem}>item</div>
        <div style={styleItem}>item</div>
        <div style={styleItem}>item</div>
        <div style={styleItem}>item</div>
        <div style={styleItem}>item</div>
      </div>
    </div>
  )
}