是否可以使用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 行，是否可以自动缩小文本的大小？或者有什么方法可以使所有盒子的尺寸相同，这样盒子的尺寸总是与线条最多的盒子的尺寸相同？

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)  */
}

干杯!