it-swarm.asia

CSS الحصول على النص في سطر واحد بدلاً من اثنين

لدي مشكلة صغيرة مع عنوان حيث أرغب في عرض النص على سطر واحد بدلاً من الانقسام على اثنين حيث أحاول ترتيب هذه الكتل كشبكة

jsFiddle

أتش تي أم أل

<div class="garage-row">
    <a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&amp;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>

المغلق

@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;

سأكون ممتنًا للغاية لو تمكن شخص ما من مساعدتي في الحصول على العنوان في سطر واحد بدلاً من خطين أو حتى إصلاحه ، فإذا تجاوز العنوان العرض ، فسوف يظهر عليه علامات القطع.

32
ngplayground

إضافة white-space: nowrap; :

.garage-title {
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

jsFiddle

81
Matt