如何在没有文本换行到第二行的情况下处理带有长文本和图像的字幕标记？

Question

我有一个循环遍历数据的for循环 - 创建一个标识和文本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>

如果文本和图像符合屏幕大小（即图像和文本彼此相邻），它将按预期工作。如果文本太长，那么它将换行到下一行。

如何停止换行到下一行？

Answer 1

这里的问题是你超过了div的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>