flexboxでフォーラムを構築しています。しかし、私は問題があります。列から新しい行にテキストを折り返す方法は？私のサイトにもどこかフレックスボックス付きCssテキスト
https://jsbin.com/bijikimubu/1/edit?html,css,js,output
：ここ
は私の例がシミュレートされword-break: break-all;で
--EDIT--
それはこのようになりますIE 11で：
チェックこの
footer {
\t background: #f00;
}
margin-top auto,
.Footer__body {
\t height: 70px;
}
.Footer__bar {
\t height: 10px;
}
.Container {
\t display: flex;
\t -webkit-box-orient: vertical;
\t -webkit-box-direction: normal;
\t flex-direction: column;
\t height: 100vh;
}
ul.Navigation__body {
\t padding-left: 0;
}
ul {
\t margin: 0px;
}
.Navigation__top {
\t list-style: none;
\t text-decoration: none;
\t background: #fde428;
\t height: 10px;
}
.Navigation__body {
\t display: flex;
\t list-style: none;
\t text-decoration: none;
\t color: #fff;
\t background: #002e5b;
\t border-bottom: 1px solid #fff;
}
.Navigation__item {
\t display: -webkit-box;
\t display: flex;
\t -webkit-box-align: center;
\t align-items: center;
\t -webkit-box-pack: center;
\t justify-content: center;
\t -webkit-box-flex: 1;
\t flex: 1;
\t cursor: pointer;
}
/* Main section */
.Center {
\t display: flex;
\t
\t align-items: center;
\t justify-content: center;
}
.Row {
\t display: flex;
\t max-width: 1000px;
\t margin: auto;
}
.Forum {
\t margin-top: 50px;
\t margin-bottom: 10px;
\t padding: 0px;
\t background: #fff;
\t height: 375;
\t width: 100%;
\t border: 1px solid #eaeaea;
}
.Forum__body {
\t display: -webkit-box;
\t display: flex;
\t -webkit-box-orient: vertical;
\t -webkit-box-direction: normal;
\t flex-direction: column;
\t min-width: 100%;
\t height: 100%;
\t width: 35%;
}
.Forum__item__body {
\t display: -webkit-box;
\t display: flex;
\t justify-content: space-around;
\t border-bottom: 1px solid #eaeaea;
\t -webkit-box-align: center;
\t align-items: center;
\t 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">
\t \t <div class="Forum ">
\t \t \t \t \t <p class="Forum__title">Name</p>
\t \t \t \t \t <div class="Forum__item__body_content">
\t \t \t \t \t \t <p>DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription</p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t <div class="Loader" v-if="loading">
\t \t \t <grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
\t \t </div>
</main>
<footer>
<div class="Footer">
<div class="Footer__body">
<p>© Company</p>
</div>
<div class="Footer__bar"></div>
</div>
</footer>
</div>
</body>
</html>希望これは
PSを支援します。このスタイルは、CSSで
です'p 'を含む' word-break：break-all'を試しましたか？テキスト？ –
はい、しかし、IEでそれは私がより多くの行を追加した後、非常に奇妙に見えます。上記のスクリーンショットを追加します。 – Jamie
@jamieこれは、テキストにスペースや '-'がないために起こることを知っていますか？スペースのない長いテキストを期待していますか？ –