如何处理里面有长文本和图像的选取框标签，而不用文本换行到第二行？

Question

我有一个 for 循环 循环处理数据 - 创建一个 div 徽标和文本并附加到选取框标签。我希望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>

如何处理里面有长文本和图像的选取框标签，而不用文本换行到第二行？

How to handle a marquee tag with long text and image inside without text wrapping to second line?

marquee

angular