[英]Flexbox text cutting off/not wrapping
我正在使用flexbox來顯示blockquote和作者/頭像彼此水平。 這是在幻燈片放映(flexslider)中,但這似乎不是問題的原因。
在我們點擊IE10之前,此方法正常。 它似乎可以在Chrome,Firefox,Opera,Safari,Edge和IE11中正常工作。
我遇到的問題是引號結尾處的文本被截斷。 如果一開始看不到此內容,則可能需要調整視口大小。 這可能是由於我在文本的兩邊都留有空白,以便為自定義打開/關閉引號留出空間。
IE10中的另一個問題是,當文本很長時(請參見第一個引號中的“ James Hetfield Longname”),它不會自動換行。 這可能與我的其他問題有關,因為我猜這兩個文本都不能正確包裝。
這里是一些示例鏈接。 我提供了CodePen,也提供了HTML模板的簡化版。
CodePen: http ://codepen.io/moy/pen/XdLELV模板: http ://moymadethis.com/flex/quote.html
真希望有人可以幫助您!
這是代碼,因為這使我添加了一些東西(盡管我認為CSS / HTML的隔離牆本身對自己沒有幫助)!
編輯:我應該補充一點,我使用Autoprefixer來流行額外的flex前綴。
HTML:
<div class="flexslider">
<ul class="slides">
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
</ul>
</div>
CSS:
/* Base blockquote styles */
blockquote {
margin-bottom: $baseline*2;
overflow: hidden; // Fixes bug when inside flexslider when open/close quote-marks duplicate.
padding: $baseline $baseline 0 0;
p {
margin-bottom: $baseline/2;
}
> p {
color: $blue-light;
@include font-size(25);
line-height: $baselineheight/1.25;
font-weight: 300;
padding-left: 30px;
-webkit-font-smoothing: antialiased;
&:before,
&:after {
background: url(../img/content/quote-open.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;
}
&:after {
background: url(../img/content/quote-close.png) no-repeat 0 0;
margin: 5px 0 0 5px;
position: absolute;
top: auto;
}
}
footer {
padding-left: 30px;
}
.name {
color: $blue;
display: block;
text-transform: uppercase;
}
}
/* Feature (avatar) quotes */
.feature-quote {
margin-bottom: $baseline;
padding-top: 5px;
}
.feature-quote footer p {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.feature-quote__cite {
margin-top: $baseline;
}
.feature-quote__avatar {
border: 5px solid $blue-lighter;
border-radius: 100%;
display: inline-block;
height: 60px;
margin-right: $baseline/2;
width: 60px;
}
/* Above 768px (Feature quote side-by-side */
@media only screen and (min-width: 768px) {
blockquote {
margin: 0 25px $baseline*2;
}
.feature-quote {
display: flex;
}
.feature-quote__text {
order: 2;
width: 66.66666%;
}
.feature-quote__cite {
display: flex;
align-items: center;
justify-content: center;
order: 1;
margin-top: 0;
padding-right: 30px;
width: 33.33333%;
}
.feature-quote__avatar {
height: 80px;
width: 80px;
}
.no-flexbox {
.feature-quote {
margin: 0 auto $baseline;
max-width: 800px;
}
.feature-quote__text,
.feature-quote__cite {
text-align: center;
width: 100%;
}
.feature-quote__cite {
p {
text-align: left;
}
}
}
}
擴展了Pete關於IE10不正確支持flexbox的評論。
http://caniuse.com/#search=flex
關於IE10:
僅支持2012語法
需要-ms-前綴
這個答案實際上有很多有關IE10中flex的信息: https : //stackoverflow.com/a/21306343/2117156
注意我正在使用自動前綴,因此所有-ms-前綴都是自動生成的。 我會在這里注意到無前綴聲明。
將以下行添加到該段落上可以flex: 0 1 auto;
我還遇到一個問題,即文本不會包裝在.feature-quote__cite
容器中。 我嘗試添加以上無效的內容。 為了解決這個問題,我必須添加flex: 0 1 auto;
直接放在段落中,而不是放在父容器.feature-quote__cite
。 雖然不理想,但看起來已經成功了。
順便說一句,在IE11中,如果沒有足夠的水平空間,頭像圖像將被壓縮。 我發現添加了flex-shrink: 0;
固定此圖像。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.