Is it possible to use css to shrink text to automatically fit the size of the div

Question

I have been working on a project and there is one page where it would show several divs (using ejs), but if one div has 3 lines and the other has 2, one would be a lot bigger than the other.

And here is my code for the HTML / ejs file:

<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>

And for the CSS file

.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;   
}

Is it possible to shrink the size of the text automatically if it is longer than 2 lines? Or is there any way I can make all the boxes the same size so the boxes are always the same size as the box with the most lines?

Answer 1

You can try to use this code below

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

Cheers!