-2

我正在尝试在每个新行之前添加一个图像所以我能够实现这一点

Apple
Ball
Cat
Dog

但我想在每个新行之前添加图像

(img) Apple
(img) Ball
(img) Cat
(img) Dog

编码

this.tooltipTitle = "Apple,Ball,Cat,Dog,Elephant"

create() {
  this.tooltip = this.renderer.createElement('div');
  this.tooltipTitle.split(',').forEach((text) => {
  this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
  this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
  this.renderer.appendChild(document.body, this.tooltip);
 });
}

this.renderer.addClass(this.tooltip,'classA')

 .classA{
   positon:absolute;
   max-width: 150px;
   font-size: 14px;
   color: black;
   padding: 3px 8px;
   background: grey;
   border-radius: 4px;
   z-index: 100;
   opacity: 0;
 }

所以 addClass 正在为整个工具提示添加样式。这很好，我正在进一步尝试的工作是在新行的开头添加图像

编辑

在尝试了很多之后，我能够添加图像“但是”它只会被添加到最后一个值而不是之前的值（而我想在每个新行上添加图像）。

this.tooltip = this.renderer.createElement('div');
this.imgforres = this.renderer.createElement('img');
this.imgsrc = 
this.renderer.setAttribute(this.imgforres,"src",
"assets/images/restriction.png")

this.tooltipTitle.split(',').forEach((text) => {
this.renderer.appendChild(this.tooltip,this.imgforres);
this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
this.renderer.appendChild(document.body, this.tooltip);
});

最新的

现在我已经实现了在每一行新文本之前得到图像，感谢 Yuri 的回复 最后一个故障是如果文本很长，它肯定会结束，但缩进不是上面的行文本，它从图像下方开始

<img> Apple
<img> Ball
<img> So this a long text
and it starts from below 
the image
<img> Cat

预期的

<img> Apple
<img> Ball
<img> So this a long text
      and it starts from 
      below the image
<img> Cat

我已经尝试过分词， justify ，它没有帮助，也许我必须将此文本嵌入到 div 或 p 标签中，然后为它们提供样式。

4

2 回答 2

2 
      this.tooltip = this.renderer.createElement('div');
      this.tooltipTitle.split(',').forEach((text) => {
      this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
      this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));

      var img2 = document.createElement('img'); // Use DOM HTMLImageElement
      img2.src = 'image2.jpg';
      img2.alt = 'alt text';
      this.renderer.appendChild(this.tooltip,img2);
      this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));

      this.renderer.appendChild(document.body, this.tooltip);
    });

在此处输入图像描述

另一种布局 在此处输入图像描述

于 2019-01-28T17:53:36.283 回答
0

你可以试试这样的 -

create(){
  this.tooltip = this.renderer.createElement('div');

    this.tooltipTitle.split(',').forEach((text) => {
      let container = this.renderer.createElement('div');
      let img = this.renderer.createElement('img');
      this.renderer.setAttribute(img, "src", "assets/images/restriction.png");
      this.renderer.appendChild(container, img);

      let textSpan = this.renderer.createElement('span');
      this.renderer.appendChild(textSpan, this.renderer.createText(text));
      this.renderer.appendChild(container, textSpan);

      this.renderer.appendChild(this.tooltip, container);
    });

    this.renderer.appendChild(document.body, this.tooltip);
}

在 html 中，我保留了一个内联 css，您可以将其放在单独的文件中，并通过调用 this.renderer.addClass() 来加载它

<style>
  span { 
    margin-left: 10px;
    display:inline-flex;
    width:150px;
    word-wrap:break-word;
} 
</style>

这是我的测试工具提示Titles -

tooltipTitle = "Apple,Ball,Cat,Dog,Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant ";

这是输出截图

测试输出

于 2019-02-04T14:22:06.340 回答