是否可以使用css缩小文本以自动适应div的大小

Question

我一直在做一个项目，有一个页面会显示几个 div（使用 ejs），但是如果一个 div 有 3 行而另一个有 2 行，那么一个会比另一个大很多。

这是我的 HTML / ejs 文件的代码：

 <div id = "home" class = "container">
<h1 class="polls-head">Polls</h1>
<div class="main-aligner">
    <% for(var i = 0; i < allPolls.length; i++){ %>
    <div class="title" id="dynamicDiv">
        <div class="poll-name" id="dynamicSpan">
        <%= allPolls[i].title %>
    </div>
    <div class="poll-link">
        <div class= "poll-view">
            <a href="polls/<%= allPolls[i]._id %>" class="btn button view">View Poll</a>
        </div>
        <div class="createdBy">
            <p>Created by: <%=allPolls[i].createdBy %></p>
        </div>
    </div>
    </div>
    <%}%>
</div>
</div>

对于 CSS 文件

.title
{
    font-family: "Lato";
    width: 365px;
    height: auto;
    min-height: 150%;
    background-color: #dfdce3;
    display: inline-block;
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 5px;
    text-align: center;
}
.poll-name
{
    font-size: 50px;
}

如果超过 2 行，是否可以自动缩小文本的大小？或者有什么办法可以让所有的盒子大小相同，这样盒子的大小总是和线条最多的盒子一样大吗？

原文由 Elisa L 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试使用下面的代码

.poll-name {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  display: block;
  line-height: 1em; /* a */
  max-height: 2em; /* a x number of line to show (ex : 2 line)  */
}

干杯!

原文由 Spartan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 em 或 rem 而不是像素来调整字体大小。它会响应并随其所在元素的大小而变化。

原文由 smthngfrnthng 发布，翻译遵循 CC BY-SA 3.0 许可协议