html – CSS在一行而不是两行中获取文本

前端之家收集整理的这篇文章主要介绍了html – CSS在一行而不是两行中获取文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个小问题的标题,我希望文本显示在一行,而不是分为两个,因为我试图将这些块作为一个网格

jsFiddle

HTML

  1. <div class="garage-row">
  2. <a class="garage-row-title" href="/board/garage_vehicle.PHP?mode=view_vehicle&amp;VID=4">
  3. <div class="garage-title">1996 Land Rover Defender</div>
  4. <div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
  5. </a>
  6. <div class="user-Meta">
  7. <b>
  8. <a href="{block_1.row.U_COLUMN_2}">Hobbs92</a>
  9. </b>
  10. </div>
  11. </div>

CSS

  1. @import url(http://fonts.googleapis.com/css?family=Open+Sans);
  2.  
  3.  
  4. .garage-row {
  5. border: 1px solid #FFFFFF;
  6. float: left;
  7. margin-right: 5px;
  8. padding: 12px;
  9. position: relative;
  10. width: 204px;
  11. }
  12. .garage-row img{}
  13. .garage-image {
  14. background-position: center center;
  15. display: block;
  16. float: left;
  17. max-height: 150px;
  18. max-width: 204px;
  19. overflow: hidden;
  20. position: relative;
  21. }
  22.  
  23. .user-Meta {
  24. background: none repeat scroll 0 0 #2C3539;
  25. color: #FFFFFF;
  26. float: left;
  27. padding: 10px;
  28. position: relative;
  29. width: 184px;
  30. }
  31. img {
  32. border-width: 0;
  33. height: auto;
  34. max-width: 100%;
  35. vertical-align: middle;
  36. }
  37. .garage-title {
  38. clear: both;
  39. display: inline-block;
  40. overflow: hidden;
  41. }
  42. .garage-row-title {
  43. font-size: 22px;
  44. font-weight: bold;
  45. }
  46. a:link {
  47. color: #43A6DF;
  48. }
  49. font-family: 'Open Sans',sans-serif;

我非常感谢,如果有人能够帮助我把标题变成一行而不是两个,甚至修复它,所以如果标题超过宽度,然后它得到椭圆。

解决方法

添加 white-space: nowrap;
  1. .garage-title {
  2. clear: both;
  3. display: inline-block;
  4. overflow: hidden;
  5. white-space: nowrap;
  6. }

jsFiddle

猜你在找的HTML相关文章