Как обработать тэг с длинным текстом и изображением внутри без переноса текста на вторую строку? - PullRequest
Новая
       28

Как обработать тэг с длинным текстом и изображением внутри без переноса текста на вторую строку?

0 голосов
/ 13 сентября 2018

У меня есть for loop , который зацикливается на данных - создает div логотипа и текста и прикрепляется к тегу marquee. Я хочу, чтобы эта серия данных была в теге marquee без переноса на следующую строку.

Вот код, который я пробовал: 

.commentary {
  font-family:Roboto-Regular;
  font-size:15px;
  color:#101010;
float:left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

marquee img {
    margin-left:3%;
    margin-right:3%;
    float:left;
    white-space:nowrap;
}
<marquee scrollamount="30" behavior="scroll" direction="left" style="background-color:#FEC33B">

  <div style="padding-top:10px;">
    <div style="white-space:nowrap;" *ngFor = "let text of data">
      <img  src="../assets/image-logo.svg"/>
      <p class="commentary">{{text}}<span> </span></p>

    </div>
  </div>

</marquee>

Работает, как и ожидалось, если текст и изображение соответствуют размеру экрана (то есть изображение и текст находятся рядом друг с другом). Если текст слишком длинный, он переносится на следующую строку.

Как мне остановить перенос на следующую строку?

1 Ответ

0 голосов
/ 13 сентября 2018

Проблема здесь в том, что вы находитесь за 100% от деления, тогда вы можете увеличить ширину до 200% или 300% 

.commentary {
  font-family:Roboto-Regular;
  font-size:15px;
  color:#101010;
float:left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

marquee img {
    margin-left:3%;
    margin-right:3%;
    float:left;
    white-space:nowrap;
}
<marquee scrollamount="30" behavior="scroll" direction="left" style="background-color:#FEC33B">

  <div style="padding-top:10px;">
    <div style="white-space:nowrap; width:300%" *ngFor = "let text of data">
      <img style="display: inline-block"  src="../assets/image-logo.svg"/>
     <span class="commentary">sdfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

    </div>
  </div>

</marquee>
...