テキストは2行で表示する必要があります。

Question

タイトルを2行で表示する必要があります。中image.Second項目の下に示し、それのように は大丈夫ですが、最初の項目が来て、私はあなたが簡単に要素の幅を変更することによって、これを達成することができます

.ms-tileview-tile-titleTextMediumCollapsed { 
 
    width: 120px !important; 
 
    top: 80px !important; 
 
    -webkit-transition: top 0.5s ease-out; 
 
    -moz-transition: top 0.5s ease-out; 
 
    -o-transition: top 0.5s ease-out; 
 
    text-align:center; 
 
    line-height: 1.5em; 
 
    height: 3em; 
 
    overflow: hidden; 
 
}

<div class="ms-tileview-tile-titleTextMediumCollapsed">Group Members</div> 
 
<div class="ms-tileview-tile-titleTextMediumCollapsed">Temp Document Library</div>

Answer 1

？

幅を変更したくない場合は、<br/>をタイトルの中央に置くことができます。

<div class="ms-tileview-tile-titleTextMediumCollapsed">Group <br/> Members</div> 

Answer 2

をたくない単線です。 しかし、幅を混乱させたくなければ、簡単な解決策はpaddingとbox-sizing: border-boxのプロパティを使うことです。このよう

：それは重要なこと

です：あなたが幅を変えることができる

.ms-tileview-tile-titleTextMediumCollapsed { 
 
    width: 120px !important; 
 
    top: 80px !important; 
 
    -webkit-transition: top 0.5s ease-out; 
 
    -moz-transition: top 0.5s ease-out; 
 
    -o-transition: top 0.5s ease-out; 
 
    text-align:center; 
 
    line-height: 1.5em; 
 
    height: 3em; 
 
    overflow: hidden; 
 
    padding: 0 20px; 
 
    box-sizing: border-box; 
 
}

<div class="ms-tileview-tile-titleTextMediumCollapsed">Team Members</div> 
 
<div class="ms-tileview-tile-titleTextMediumCollapsed">Draft Document Library</div>

Answer 3

「チームメンバー」を2行にしたいのですか？しかし、他のすべてを保つ？

これまでのメニュー項目でそのクラスを繰り返す必要がないように、これらの単語をラッパーでラップします。私はあなたがHTMLをカスタマイズすることができますどのくらいかわからないが、これはあなたのために良い仕事かもしれません：

HTML

<div class="title-container"> 
    <span class="two-line-title">Team Members</span> 
    <span>Draft Document Library</span> 
</div> 

CSSここで

.title-container { 
    width: 120px !important; 
    top: 80px !important; 
    text-align:center; 
    line-height: 1.5em; 
    overflow: hidden; 
    transition: top 0.5 ease-out; 
} 

.title-container span { 
    display: block; 
    margin: 0 auto; 
} 

.two-line-title { 
    width: 70px !important; 
    line-height: 1.2em; 
} 

http://codepen.io/StefanBobrowski/pen/ryRRRv

Answer 4

レオの答えはシンプルでエレガントですが、あなたが達成できる別の方法です蟻。

.ms-tileview-tile-titleTextMediumCollapsed { 
    top: 80px !important; 
    -webkit-transition: top 0.5s ease-out; 
    -moz-transition: top 0.5s ease-out; 
    -o-transition: top 0.5s ease-out; 
    text-align:center; 
    line-height: 1.5em; 
    height: 3em; 
    overflow: visible; 
    word-wrap: break-word; // word break with overflow display 
    max-width: 120px; 
} 

を参照してください。

https://jsfiddle.net/sarojsasmal/6ce9ym4n/4/