Css 与 flexbox 换行文本答案

【问题标题】：Css with flexbox wrap textCss 与 flexbox 换行文本
【发布时间】：2016-10-27 05:54:56
【问题描述】：

我正在与flexbox 建立一个论坛。但我有一个问题。如何将文本从列换行到新行？

这是我的模拟示例：

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

我网站上的其他地方：

--编辑--

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

【问题讨论】：

您是否在包含文本的p 上尝试过word-break: break-all？
是的，但是在 IE 中添加更多行后它看起来很奇怪。我将在上面添加一个屏幕截图。
@jamie 你知道这是因为文本中没有空格或- 吗？您是否期待没有空格的长文本？
你能添加一个关于它的行为应该如何的快照
IE 11 的外观是您想要的其他浏览器的外观吗？

标签： css flexbox

【解决方案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中

【讨论】：