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;


}

我正在使用引导 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/

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