Question

我有一个文本内容很长的元素，当它大于父元素的宽度时，我想将其截断/缩小。但是，不是使用“文本...”样式截断/缩小整个窗口宽度，而是显示一个水平滚动条。如何解决此问题，通常如何防止子元素增加父元素的宽度？请注意，content元素位于弹性项目中。

示例代码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

Answer 1

删除：

 white-space: nowrap;

来自您的文章CSS类。

或者如果您要截断文本。您将需要一个固定的宽度，或者如果您想使用flexbox：see this

Answer 2

尝试给出净值和主要百分比的宽度。

例如：

   nav {
    background-color: aquamarine;
    width: 30%;

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

main {
    background-color: bisque;
    width: 70%;

}

CSS：防止带有文本内容的子元素增加窗口大小

2 个答案: