Html 将文本放置在两行上-Ionic 1

我正在努力将此plunker中以粗体黑色字体显示的文本删除两行，同时防止其侵犯左侧的圆形图像：

具体而言，对于屏幕较大的用户，文本内容为“这是一个非常长的事件名称，需要超过2行并在进入图像下方之前停止”：

<h2 style="text-align: center; line-height: 2.5; font-weight: bold;">This is a very long event name that needs to go over 2 lines and stop before going under the image</h2>

这是一个非常长的事件名称，需要超过2行并在进入图像下方之前停止

到目前为止，我已经尝试了各种方法，但每种方法都会弄乱视图的其余部分。我是否需要重新构造整个容器以实现此结果

---

编辑：更新了链接。

发生这种情况是因为（锚定标记）。我不确定它在做什么。

发生这种情况是因为（锚定标记）。我不确定它在做什么。

也许我不理解这个问题，但尝试将元素“a”和“h2”的css更改为：

   <a class="item item-thumbnail-left" style="
                line-height: 2.5;
                border-bottom: solid 1px #F2EFEF;
                background-color: #F2EFEF;
                padding-left: 130px;
                " >

   <h2 style="text-align: center; 
               line-height: 2.5; 
               font-weight: bold; 
               white-space: pre-line;">This is a very long event name that needs to go over 2 lines and stop before going under the image</h2>

这是一个非常长的事件名称，需要超过2行并在进入图像下方之前停止

也许我不理解这个问题，但尝试将元素“a”和“h2”的css更改为：

   <a class="item item-thumbnail-left" style="
                line-height: 2.5;
                border-bottom: solid 1px #F2EFEF;
                background-color: #F2EFEF;
                padding-left: 130px;
                " >

   <h2 style="text-align: center; 
               line-height: 2.5; 
               font-weight: bold; 
               white-space: pre-line;">This is a very long event name that needs to go over 2 lines and stop before going under the image</h2>

这是一个非常长的事件名称，需要超过2行并在进入图像下方之前停止

plnkr链接已失效。plnkr链接已失效。我有类似的想法，但删除它并将其更改为div或以其他方式再次破坏整个视图。我有类似的想法，但删除它并将其更改为div或以其他方式再次破坏整个视图。