Как заставить Twitter Bootstrap.dl-горизонтальный контент DT обернуть вместо усечения?

Bootstrap имеет отличный стиль отображения горизонтальных определений, но Я хочу, чтобы содержимое DT обертывалось, а не усекалось.

Я знаю, что на странице

Кто-нибудь знает об этом для исправления?

Здесь готовый загрузочный 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;
}

Мой вопрос здесь похож на этот вопрос, если это помогает:

Спасибо заранее!

Ответы

Ответ 1

вы можете прокомментировать white-space: nowrap; из .dl-horizontal dt, если вы хотите обернуть содержимое во всех dt

если вы хотите обернуть содержимое для одного dt, затем добавьте inline style='white-space: normal;' к этому конкретному dt

Ответ 2

добавить перезапись CSS после ссылок CSS-бутстрапа

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

Ответ 3

Я использовал это, так как я не хотел потерять разрыв строки, если ширина окна становится малой:

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

width и margin-left являются необязательными параметрами, если вы хотите отобразить больше текста в столбце dt на строку. Разница 20px - это пространство между столбцами.

margin-bottom добавляет небольшое пространство между строками, чтобы они лучше отличались друг от друга. Это полезно, только если white-space: normal; создает разрыв строки (не забывайте, что размер шрифта может влиять на посетителя (например, настройки 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;
}

Ответ 4

Дайте идентификатор вашему dl: <dl class="dl-horizontal" id="freelance">

Затем добавьте это в свой css:

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

При необходимости измените ширину и маржу.