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

Question

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

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

干杯！

Answer 2

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

Answer 3

1. 尝试应用flexbox，例如display：inline-flex;

https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

1. 网格也可能对多线也有效

https://css-tricks.com/snippets/css/complete-guide-grid/