css 如何用显示Flex将两个段落变为一个段落

0qx6xfy6 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(180)

我想把View More文本移到第一段的末尾。如何做到既不改变当前样式又不使用!important。这是不可能的吗？

.main {
    width: 500px;
    background-color: #eee;
    display: flex;
}
.main p {
    display: flex;
}

<div class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod sem quis felis sollicitudin, molestie
    vehicula lacus venenatis. Aenean sollicitudin malesuada neque. Integer vel molestie lacus. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pretium purus sed iaculis faucibus. In
    quis dictum augue. Nunc porta vestibulum turpis et dictum. Ut cursus laoreet euismod. Nam at dapibus libero. Donec
    lacinia erat at nisl mollis mollis. In consectetur nisi at massa scelerisque consequat. Etiam quis nisi ut massa
    fermentum fermentum. Suspendisse ultrices, justo sit amet porttitor pretium, lorem nulla blandit augue, vel tempus
    elit enim nec dui. Aenean suscipit quam eu eros pulvinar, id accumsan ante euismod.
  </p>
  <p>View More</p>
</div>

我预期的结果是这样的：

css

来源：https://stackoverflow.com/questions/74883370/how-to-make-two-paragraph-to-one-paragraph-with-display-flex

1条答案

按热度按时间

fhg3lkii1#

可以将flex-direction: column;添加到.main类中

.main {
    width: 500px;
    background-color: #eee;
    display: flex;
    flex-direction: column;
}
.main p {
    display: flex;
}

<div class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod sem quis felis sollicitudin, molestie
    vehicula lacus venenatis. Aenean sollicitudin malesuada neque. Integer vel molestie lacus. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pretium purus sed iaculis faucibus. In
    quis dictum augue. Nunc porta vestibulum turpis et dictum. Ut cursus laoreet euismod. Nam at dapibus libero. Donec
    lacinia erat at nisl mollis mollis. In consectetur nisi at massa scelerisque consequat. Etiam quis nisi ut massa
    fermentum fermentum. Suspendisse ultrices, justo sit amet porttitor pretium, lorem nulla blandit augue, vel tempus
    elit enim nec dui. Aenean suscipit quam eu eros pulvinar, id accumsan ante euismod.
  </p>
  <p>View More</p>
</div>

编辑：flexbox不能这样做，但是display: inline可以这样做
一个二个一个一个

赞(0）回复(0）举报 2022-12-24

我来回答

css 如何用显示Flex将两个段落变为一个段落

1条答案

相关问题

热门标签

最新问答