CODEWITHSUNDEEP
htmlcssejs
Elisa L
Elisa L

Reputation: 322

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

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.

enter image description here

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?

Upvotes: 17

Views: 56140

Answers (3)

Sir Robert Casey
Sir Robert Casey

Reputation: 62

  1. Try applying flexbox, such as display:inline-flex;

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

  1. Grids could also be effective with multilines as well

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

Upvotes: -1

Spartan
Spartan

Reputation: 349

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!

Upvotes: 15

smthngfrnthng
smthngfrnthng

Reputation: 93

You can use em or rem instead of pixels to size your font. It will be responsive and change with the size of the element it is inside of.

Upvotes: 2

Related Questions