文本应该显示在两行

我需要在两行显示标题。像它下面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>

来源

2017-04-04 pawan kotak

而....？你尝试过什么吗？减少元素的宽度？用br'强制换行？你期望哪种解决方案？ – DaniP

我知道你想避免使用这些，但为什么不在团队和成员之间使用'
'。 – NathanielSantley

CSS在这里没有帮助。两个div都有相同的类别但文字不同。你需要添加一个类或简单的br。 Javascript可以帮助整理出来... –

你可以改变宽度：

是那么重要吗？

如果你不想改变宽度，你可以把<br/>放在标题的中间。

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

来源

2017-04-04 14:12:40 Leo

您可以轻松地通过改变元素的宽度达到这个单行。但是，如果你不想乱用宽度，那么简单的解决方案是使用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>

来源

2017-04-04 14:11:10 Chris

所以你想要“团队成员”在两条线？但保持一切？

我会将这些单词包装在一个包装中，这样你就不必在任何菜单项上重复该类。我不知道有多少你可以自定义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

来源

2017-04-04 14:27:43 StefanBob

这里是另一种可以实现的方式，尽管狮子座的答案很简单并且eleg蚂蚁。

.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/

来源

2017-04-04 14:54:12

文本应该显示在两行

回答

相关问题