我有一个小问题的标题,我希望文本显示在一行,而不是分为两个,因为我试图将这些块作为一个网格
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
@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;
我非常感谢,如果有人能够帮助我把标题变成一行而不是两个,甚至修复它,所以如果标题超过宽度,然后它得到椭圆。
解决方法
添加
white-space: nowrap;
:
.garage-title { clear: both; display: inline-block; overflow: hidden; white-space: nowrap; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。