css: последняя строка разделена надвое, тогда как этого не должно быть

#css

Вопрос:

Вот мой CSS:

 div.devis-top {
  background-color:#367fb1;
  -moz-border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -khtml-border-top-right-radius: 20px;
  border-top-right-radius: 20px;
  -moz-border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -khtml-border-top-left-radius: 20px;
  border-top-left-radius: 20px;
}
div.devis-top div {
  padding:10px 10px 10px 20px;
  border:1px solid red;
}
div.devis-description {
  text-align:center;
}
span.devis-top-professionnels,
span.devis-top-particuliers {
  letter-spacing:-1px;
  font-weight:bold;
  text-transform:uppercase;
}
span.devis-top-professionnels {
  color:#edba00;
}
span.devis-top-particuliers {
}
span.devis-top-vice-versa,
span.devis-top-slogan {
  color:#ffffff;
  text-transform:uppercase;
}
span.devis-top-slogan {
  font-size:18px;
  font-weight:bold;
  letter-spacing:2px;
}
img#points-de-suspension {
  vertical-align:text-top;
}
img#metiers-1 {
  float:right;
  position: relative;
  bottom:65px;
}

Вот html-код:

 <body class="sbody">
  <div class="devis-top">
    <div>
      <img src="{$img_pap_devis}" alt="{$alt_img_pap_devis}" />
    </div>
    <div>
      <span class="devis-top-professionnels">De professionnels</span>
      <span class="devis-top-particuliers">à particuliers</span>
      <img id="points-de-suspension" src="{$img_points_de_suspension}" />
      <span class="devis-top-vice-versa">et vice versa</span>
      <img id="metiers-1" src="{$img_metiers_1}" />
    </div>
    <div>
      <img id="metiers-2" src="{$img_metiers_2}" />
      <span class="devis-top-slogan">comme vous voulez... quand vous voulez</span>
    </div>
  </div>
</body>

И вот результат:

Проблема с переносом слов в CSS

Последнее предложение должно быть в одной строке, почему оно разделено на две строки? Я этого не понимаю. У вас есть какие-нибудь идеи, как это исправить? Большое вам спасибо!

Ответ №1:

Убедитесь, что ширина внешнего элемента достаточно велика, чтобы разместить его всего в одной строке.

Из того, что я вижу, div.devis-top div имеет отступ, и слоган не поместится в одну строку!

Измените отступ (особенно правый), и он должен соответствовать.

Кроме того, убедитесь, что слоган остается в одной строке, используя white-space: nowrap :

 span.devis-top-slogan {
  font-size:18px;
  font-weight:bold;
  letter-spacing:2px;
  white-space: nowrap;
}

1. Ваше решение делает предложение в одну строку, но я хотел, чтобы оно было справа (чего я не понял, так это того, что текст во второй строке должен располагаться справа от первой строки, где строка была разделена).

Ответ №2:

Измените на это:

 span.devis-top-slogan {
  color:#ffffff;
  text-transform:uppercase;
  display:block;
}

вот демонстрация: http://jsfiddle.net/rpDFL/2 /

1. Ваше решение было правильным, я добавил float:right; и position: relative; , чтобы немного изменить положение, я надеюсь, что это будет хорошо выглядеть в IE. Большое вам спасибо.