Question

我正努力将这条用粗体黑色字体显示的文字放在2条线上，同时防止它侵犯左边的圆形图像：

具体来说，对于那些拥有较大屏幕的人来说，“这是一个非常长的事件名称，需要超过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>

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

编辑：更新了链接。

Answer 1

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

Answer 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行文本 - 离子1

2 个答案: