Html CSS 在一行而不是两行中获取文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17704539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS getting text in one line rather than two
提问by ngplayground
I have a small issue with a title where I would like text to display on a single line rather than split onto two as im trying to arrange these blocks as a grid
我的标题有一个小问题，我希望文本显示在一行上，而不是拆分成两行，因为我试图将这些块排列为网格
html
html
<div class="garage-row">
<a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&VID=4">
<div class="garage-title">1996 Land Rover Defender</div>
<div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
</a>
<div class="user-meta">
<b>
<a href="{block_1.row.U_COLUMN_2}">Hobbs92</a>
</b>
</div>
</div>
css
css
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.garage-row {
border: 1px solid #FFFFFF;
float: left;
margin-right: 5px;
padding: 12px;
position: relative;
width: 204px;
}
.garage-row img{}
.garage-image {
background-position: center center;
display: block;
float: left;
max-height: 150px;
max-width: 204px;
overflow: hidden;
position: relative;
}
.user-meta {
background: none repeat scroll 0 0 #2C3539;
color: #FFFFFF;
float: left;
padding: 10px;
position: relative;
width: 184px;
}
img {
border-width: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
}
.garage-row-title {
font-size: 22px;
font-weight: bold;
}
a:link {
color: #43A6DF;
}
font-family: 'Open Sans',sans-serif;
I would greatly appreciate if someone were able to help me get the title into one line rather than two or even fix it so if the title exceeds the width then it gets ellipses.
如果有人能够帮助我将标题变成一行而不是两行，甚至修复它，我将不胜感激，如果标题超过宽度，那么它就会变成省略号。
回答by Matt
Add white-space: nowrap;:
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
回答by subindas pm
The best way to use is white-space: nowrap;This will align the text to one line.
最好的使用方法是white-space: nowrap;这会将文本对齐到一行。
