Text sollte in zwei Zeilen angezeigt werden

Question

Ich muss den Titel in zwei Zeilen anzeigen. Wie es in unten image.Second dieses Artikels ist gut, aber zuerst Artikel kommt ist einzige Zeile, die ich möchte nicht

.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

Sie die Breite ändern könnte:

ist es so wichtig?

Wenn Sie nicht möchten, die Breite zu ändern, können Sie eine <br/> in der Mitte des Titels setzen.

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

Answer 2

Sie können dies leicht erreichen, indem die Elemente Breite. Aber wenn Sie nicht mit der Breite stören wollen, dann ist die einfache Lösung padding und box-sizing: border-box Eigenschaften zu verwenden.

So:

.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

Sie wollen also "Teammitglieder" in zwei Zeilen? Aber alles andere behalten?

Ich würde diese Wörter in einem Wrapper so verpacken, dass Sie diese Klasse nicht auf jedem Menüelement wiederholen müssen. Ich weiß nicht, wie viel können Sie die HTML anpassen, aber dies besser für Sie arbeiten könnte:

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

Hier ist ein anderer Weg, wie Sie es erreichen können, obwohl Leos Antwort einfach und elegant ist Ameise.

.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; 
} 

bitte überprüfen Sie den Link.

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