如何強制Twitter Bootstrap .dl-橫向DT內容換行而不是截斷？

Bootstrap具有很好的水平清晰度列表樣式，但是我希望DT內容能夠包裹，而不是被截斷。如何強制Twitter Bootstrap .dl-橫向DT內容換行而不是截斷？

我知道他們的base.css page他們說：「Heads up！水平描述列表將截短太長的詞，以至於不能適應左列固定文本溢出。」

任何人都知道這個問題的解決方法？

這裏是現成的，貨架引導CSS我一直在痛苦上，但沒有成功：

.dl-horizontal { 
    *zoom: 1; 
} 
.dl-horizontal:before, 
.dl-horizontal:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 
.dl-horizontal:after { 
    clear: both; 
} 
.dl-horizontal dt { 
    float: left; 
    width: 160px; 
    clear: left; 
    text-align: right; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

這裏我quesion類似於這個問題，如果這能幫助： Prevent Twitter bootstrap empty <dd> filling with next <dd> value

謝謝提前！

來源

2012-10-06 Rowe Morehouse

你可以從.dl-horizontal dt塊註釋掉white-space: nowrap;，如果你想包裝內容中的所有DT

，如果你想包裝內容爲一個單一的DT再加入在線style='white-space: normal;'到特定DT

來源

2012-10-07 10:19:03

添加引導CSS後CSS覆蓋引用

.dl-horizontal dt 
{ 
    white-space: normal; 
    width: 200px; 
}

來源

2012-10-12 13:57:29 dinnouti

您也可以避開200像素寬度 – tommasop

您還需要調整'瑪格。相應的'dd'元素的'in-left'比'dt'元素的寬度多20px，否則它們之間沒有空格。 – Mike

給一個id你dl：<dl class="dl-horizontal" id="freelance">

如果需要的話

#freelance dt { 
    overflow: visible; 
    width: 170px !important; 
    margin-right: 8px; 
}

變化幅度和保證金：

然後添加到您的CSS。

來源

2013-03-15 05:41:58

你不需要添加一個ID也不需要！重要的。 –

我用這個，因爲我不想失去的斷行，如果窗口的寬度變小：如果你想顯示在dt列更多的文字

@media (min-width: 768px) { 
    .dl-horizontal dt { 
     width:280px; 
     white-space: normal; 
     margin-bottom: 5px; 
    } 
    .dl-horizontal dd { 
     margin-left:300px; 
    } 
}

的width和margin-left是可選的設置每行。 20px的差異是列之間的空間。

margin-bottom在行之間增加了一些空間，因此它們可以更好地區分開。這是如果white-space: normal;產生換行符唯一有用的（不要忘記的是，字體大小可以通過訪問者的影響（例如，Windows dpi設置）

enter image description here

小窗口寬度：
enter image description here

自舉源比較：

dd { 
    margin-left: 0; 
} 
@media (min-width: 768px) 
.dl-horizontal dt { 
    float: left; 
    width: 160px; 
    overflow: hidden; 
    clear: left; 
    text-align: right; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
@media (min-width: 768px) 
.dl-horizontal dd { 
    margin-left: 180px; 
}

來源

2015-04-01 10:50:15 mgutt

不錯的解決方案！ –

我認爲margin-bottom必須同時適用於dt和dd， – Sangeet

如何強制Twitter Bootstrap .dl-橫向DT內容換行而不是截斷？

回答

相關問題