CSS - 文本流和居中

Question

我正在使用Rails构建一个事件应用程序。 在我的索引页面上，每个事件由相关图像表示，事件标题和日期在其上转置。 像这样 -

理想情况下，我希望用户为他们的事件输入一个标题，这个标题是'到点'/'简洁'但是没有真正的方法我可以控制这个，也不是我想要的。 当我尝试输入一个过长的标题时，会发生这种情况 -

我需要文本流动，标题（和日期）绝对居中在图像的中间。它破坏的那一刻（如下图所示）并紧贴在左边。这是我在相关的代码。时刻 -

events.index.html.erb

<ul>

                    <% @events.each do |event| %>
                <li class="events"> 
                        <%= link_to (image_tag event.image.url), event, id: "image" %>
                    <div class="text">  
                        <h2><%= link_to event.title, event %></h2>
                        <h3><%= link_to event.date.strftime('%A, %d %b %Y'), event %></h3>
                </li>       
                    <% end %>
                    </div>

            </ul>       

events.css.scss

  li.events { 
    width: 350px; 
    height: 350px; 
    float: left;
    margin: 20px;
    list-style-type: none;
    position: relative; 

}

li.events img { 
    width: 100%; 
    height: 100%; 
    border-radius: 20px;





}

div.text  { 


    padding: 25px; 
    position: absolute; 
    top: 100px;
    left: auto;



}

div.text a {
    text-decoration: none;
    color: #FF69B4;
    font-weight: bolder;
    padding: 5px;
    border-radius: 10px;    
    background-color: rgba(255,255,255,.8);
    -webkit-backdrop-filter: invert(10px);
    margin: 0 auto;
    text-align: center;


}

我正在使用bootstrap gem，但不确定这是否与此问题相关。 任何帮助表示赞赏。

Answer 1

我试图做到这一点，我找到了许多帮助我的教程。 不幸的是，像我发现的border-radius没有任何用处。 但是 ，另一方面，线的开头和结尾的空格，我修复了它：

https://fiddle.jshell.net/s112Lao0/

如您所见，没有border-radius 。 但是有一个很好的padding 。

资料来源：

https://css-tricks.com/multi-line-padded-text/

http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/

https://fiddle.jshell.net/s112Lao0/

我希望这会有所帮助。 :)