Question

我正在建立一个flexbox的论坛。但是我遇到了问题。如何将文本从列包装到新行？

这是我的模拟示例：

https://jsbin.com/bijikimubu/1/edit?html,css,js,output

我网站上的其他地方：

- 编辑 -

使用word-break: break-all;在IE 11中看起来像这样：

Answer 1

检查这个

footer {
	background: #f00;
}

margin-top auto,
.Footer__body {
	height: 70px;
}

.Footer__bar {
	height: 10px;
}

.Container {
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	height: 100vh;
}

ul.Navigation__body {
	padding-left: 0;
}

ul {
	margin: 0px;
}

.Navigation__top {
	list-style: none;
	text-decoration: none;
	background: #fde428;
	height: 10px;
}

.Navigation__body {
	display: flex;
	list-style: none;
	text-decoration: none;
	color: #fff;
	background: #002e5b;
	border-bottom: 1px solid #fff;
}

.Navigation__item {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-flex: 1;
	flex: 1;
	cursor: pointer;
}
/* Main section */
.Center {
	display: flex;
	
	align-items: center;
	justify-content: center;
}

.Row {
	display: flex;
	max-width: 1000px;
	margin: auto;
}

.Forum {
	margin-top: 50px;
	margin-bottom: 10px;
	padding: 0px;
	background: #fff;
	height: 375;
	width: 100%;
	border: 1px solid #eaeaea;
}

.Forum__body {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	min-width: 100%;
	height: 100%;
	width: 35%;
}

.Forum__item__body {
	display: -webkit-box;
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid #eaeaea;
	-webkit-box-align: center;
	align-items: center;
	cursor: pointer;
}
.Forum__item__body_content p{
  word-wrap:break-word;
}

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="Container">
    <header>
        <div class="Navigation">
            <div class="Navigation__top"></div>
            <nav v-show="authenticated">
                <ul class="Navigation__body">
                    <li class="Navigation__item" v-link="{ name: 'Forums' }">
                        <p>Home</p>
                    </li>
                    <li class="Navigation__item" v-link="{ name: 'EditProfile', params: { user: user.slug }}">
                        <p>Profiel</p>
                    </li>

                    <li class="Navigation__item" v-link="{ name: 'Subscription' }">
                        <p>Abonnementen</p>
                    </li>

                    <li class="Navigation__item" v-link="{ name: 'Corporations' }">
                        <p>Corporaties</p>
                    </li>

                    <li class="Navigation__item" v-link="{ name: 'Users' }">
                        <p>Gebruikers</p>
                    </li>

                    <li class="Navigation__item" @click="destroyLogin">
                        <p>Uitloggen</p>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
    <div class="Row Center">
		<div class="Forum ">
					 <p class="Forum__title">Name</p>
					<div class="Forum__item__body_content">
						<p>DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
            DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
            DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
            DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription</p>
					</div>
				</div>
			</div>
    

		<div class="Loader" v-if="loading">
			<grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
		</div>
  
    </main>

    <footer>
        <div class="Footer">
            <div class="Footer__body">
                <p>© Company</p>
            </div>

            <div class="Footer__bar"></div>
        </div>
    </footer>
</div>
</body>
</html>

我已经改变了你的标记和css

希望这有帮助

PS：此样式位于css

使用flexbox包装文本的CSS

1 个答案: