html - CSS:防止带有文本内容的子元素增大窗口大小

标签 html css flexbox

我有一个文本内容很长的元素，当它大于父元素的宽度时，我想截断/收缩它。但是，不是使用“文本...”样式截断/收缩，而是整个窗口宽度增加并出现水平滚动条。我该如何解决这个问题，通常如何防止子元素增加父元素的宽度？请注意，内容元素位于 flex 元素内。

示例代码 https://codepen.io/anon/pen/BqMNXe :

HTML

<body>
  <nav>
  </nav>

  <main>
    <article>
        lorem ipsum dolores lorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum dolores
    </article>
  </main>
</body>

CSS

    body{
        display: flex;
        height: 100%;
    }

    html {
      height: 100%;
    }

    nav {
        background-color: aquamarine;
        width: 20em;

        flex-shrink: 0;
        overflow-y: scroll;
        border-right: 0.2em solid black;
    }

    main {
        background-color: bisque;
        flex-shrink: 1;
        flex-grow: 1;
    }

    article {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

谢谢， Z

最佳答案

删除: