0

Проблема с текстом, вылазит за границы div. и в спан пробовал заворачивать и каждую строку в свой div - Бестолку... Что с ним можно сделать, чтоб не плавал так?Надо чтоб таквведите сюда описание изображения

.head {
  width: 100vw;
  height: 160px;
  background-color: grey;
}

.head .logo {
  margin-left: 390px;
  height: 100%;
  width: 195px;
  display: block;
}

.head .logo p {
  display: block;
  text-align: left;
}

.head .logo #company {
  font-size: 50px;
  font-family: "Edwardian Script ITC";
  color: rgb(199, 169, 0);
  line-height: 0.5;
  -moz-transform: matrix( 1.42836573074154, 0, 0, 1.428425767181, 0, 0);
  -webkit-transform: matrix( 1.42836573074154, 0, 0, 1.428425767181, 0, 0);
  -ms-transform: matrix( 1.42836573074154, 0, 0, 1.428425767181, 0, 0);
  max-width: inherit;
}

.head .logo #compName {
  font-size: 13px;
  font-family: "Century Gothic";
  color: rgb(28, 40, 91);
  text-transform: uppercase;
  line-height: 1.923;
  -moz-transform: matrix( 1.7948717948718, 0, 0, 1.78179668768874, 0, 0);
  -webkit-transform: matrix( 1.7948717948718, 0, 0, 1.78179668768874, 0, 0);
  -ms-transform: matrix( 1.7948717948718, 0, 0, 1.78179668768874, 0, 0);
  
}
<section class="head">
  <div class="logo">
    <p id="company">Company </p>
    <p id="compName">lorem ipsum </p>
  </div>
</section>

введите сюда описание изображения

P.S. Когда ставлю margin-top - толкает родительские элементы, почему так?

6
  • Эм... обычно логотипы размещают как изображения. Зачем так издеваться над бедным текстом?
    – DaemonHK
    Commented 12 июн. 2017 в 17:58
  • такое задание) изображение тыкну если не найду решения. Хочу просто даже для себя понять, почему так себя ведет, что с ним делать. Commented 12 июн. 2017 в 17:59
  • 1
    Скорее всего (99% для меня) это из-за transform, который меняет текст, добавляя завитушки из шрифта (кстати, почему Вы реально не подключили шрифт для него, зачем так извращаться?).
    – DaemonHK
    Commented 12 июн. 2017 в 18:04
  • Задай padding-left
    – Alex78191
    Commented 12 июн. 2017 в 18:04
  • transform не добавляет ведь завитушек, размер только... шрифт подключен "font-family: "Edwardian Script ITC";" а без него действительно перестает вылазить. уже что-то. Commented 12 июн. 2017 в 18:08

1 ответ 1

1

.head {
  width: 100vw;
  height: 160px;
  background-color: grey;
}

.head .logo {
  margin-left: 35%;
  height: 100%;
  width: 195px;
  display: block;
}

.head .logo span {
  text-align: left;
}

.head .logo #company {
  font-size: 50px;
  font-family: "Edwardian Script ITC";
  color: rgb(199, 169, 0);
  line-height: 0.5;
  -moz-transform: matrix( 1.42836573074154, 0, 0, 1.428425767181, 0, 0);
  -webkit-transform: matrix( 1.42836573074154, 0, 0, 1.428425767181, 0, 0);
  -ms-transform: matrix( 1.42836573074154, 0, 0, 1.428425767181, 0, 0);
  max-width: inherit;
}

.head .logo #compName {
  font-size: 13px;
  font-family: "Century Gothic";
  color: rgb(28, 40, 91);
  text-transform: uppercase;
  line-height: 1.923;
  -moz-transform: matrix( 1.7948717948718, 0, 0, 1.78179668768874, 0, 0);
  -webkit-transform: matrix( 1.7948717948718, 0, 0, 1.78179668768874, 0, 0);
  -ms-transform: matrix( 1.7948717948718, 0, 0, 1.78179668768874, 0, 0);
  
}
<section class="head">
  <div class="logo">
    <span id="company">Company </span>
    <span id="compName">lorem ipsum </span>
  </div>
</section>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.