首页 文章

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

提问于
浏览 次
3

我有一个长文本内容的元素，当它大于父的宽度时，我想截断/缩小 . 但是，不是使用“text ...”样式截断/缩小，而是整个窗口宽度增加，并出现水平schrollbar . 我该如何解决这个问题，一般如何防止子元素增加父元素的宽度？请注意，content元素位于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

html css flexbox

2 回答

  • 3

    去掉：

    white-space: nowrap;

    从你的文章css类 .

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

    回复于
  • 1

    尝试给出导航和主要百分比的宽度 .

    例如 ：

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

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

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

}
    回复于

相关问题