CODEWITHSUNDEEP
htmlcss
DavidDunham
DavidDunham

Reputation: 1362

CSS Text mimick two lines for 1 line items

I am trying to have 1 Line Text be on the top line of two line text with the help of CSS or HTML-reconstruction (I am open to either). I have tried with line height, yet that also spaces the two lines further apart... I cannot split the text in two span elements and just have a secondary empty span element for 1-line-items because the text is created dynamically in various languages so I have no way of knowing where it would break (because the font is also not monotype)

Note: There are never more than 2 lines of text

.

Goal -> enter image description here

.

.

Reality -> enter image description here

.tiles {
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
}

.tile>div {
    display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 20%;
    border: #ccc solid 1px;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(204,204,204,0.2) 100%);
    
    /* http://www.heropatterns.com/ */
    /*
    background-color: #1e252e;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 10 12c1.67 0 3.182-.683 4.27-1.785A5.998 5.998 0 0 0 14 12h2a4 4 0 0 1 4-4V6c-1.67 0-3.182.683-4.27 1.785C15.905 7.22 16 6.622 16 6c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 20 6V4a4 4 0 0 1-4-4h-2c0 .622.095 1.221.27 1.785A5.982 5.982 0 0 0 10 0C8.33 0 6.818.683 5.73 1.785 5.905 1.22 6 .622 6 0H4a4 4 0 0 1-4 4v2c1.67 0 3.182.683 4.27 1.785A5.998 5.998 0 0 1 4 6c0-.622.095-1.221.27-1.785A5.982 5.982 0 0 1 0 6v2a4 4 0 0 1 4 4h2zm-4 0a2 2 0 0 0-2-2v2h2zm16 0a2 2 0 0 1 2-2v2h-2zM0 2a2 2 0 0 0 2-2H0v2zm20 0a2 2 0 0 1-2-2h2v2zm-10 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z' fill='%23384049' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    */
}

.tile>div>div {
    display: table-cell;
    vertical-align: middle;
}
.tile {
    display:inline-block;
    margin: 40px;
    text-decoration: none;
    width: 180px;
    height: 180px;
}

a.tile {
    text-decoration: none;
}

.tile>div:hover{
    box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2);
}

.tile>div {
    -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
.tile .text {
    display: block;
}

@media only screen and (max-width: 500px) {
    .k-mobile .tile {
        width: 48vw;
        padding: 2vw;
        height: 44vw;
        margin: 0;
    }
}
@media only screen and (min-device-width: 500px) and (max-device-width: 1023px) {
    .k-mobile .tile {
        width: 24vw;
        padding: 1vw;
        height: 22vw;
        margin: 0;
        font-size: 15px;
        line-height: 18px;
    }
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="tiles">
        <a class="tile" href="#/contracts">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text" style="/* height: 40px; */ /* display: inline-block; */">1 Line only</span></a><a class="tile" href="#/contracts/unsigned">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/sign">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/qa">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/archive">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">1 Line only</span></a><a class="tile" href="#/feeds">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">1 Line only</span></a>
        
    </div>
</body>
</html>

Upvotes: 4

Views: 1872

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

Was such a result necessary? I added flex rule and flex-wrap: wrap to .tiles class.

.tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
}

.tile>div {
    display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 20%;
    border: #ccc solid 1px;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(204,204,204,0.2) 100%);
    
    /* http://www.heropatterns.com/ */
    /*
    background-color: #1e252e;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 10 12c1.67 0 3.182-.683 4.27-1.785A5.998 5.998 0 0 0 14 12h2a4 4 0 0 1 4-4V6c-1.67 0-3.182.683-4.27 1.785C15.905 7.22 16 6.622 16 6c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 20 6V4a4 4 0 0 1-4-4h-2c0 .622.095 1.221.27 1.785A5.982 5.982 0 0 0 10 0C8.33 0 6.818.683 5.73 1.785 5.905 1.22 6 .622 6 0H4a4 4 0 0 1-4 4v2c1.67 0 3.182.683 4.27 1.785A5.998 5.998 0 0 1 4 6c0-.622.095-1.221.27-1.785A5.982 5.982 0 0 1 0 6v2a4 4 0 0 1 4 4h2zm-4 0a2 2 0 0 0-2-2v2h2zm16 0a2 2 0 0 1 2-2v2h-2zM0 2a2 2 0 0 0 2-2H0v2zm20 0a2 2 0 0 1-2-2h2v2zm-10 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z' fill='%23384049' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    */
}

.tile>div>div {
    display: table-cell;
    vertical-align: middle;
}
.tile {
    display:inline-block;
    margin: 40px;
    text-decoration: none;
    width: 180px;
    height: 180px;
}

a.tile {
    text-decoration: none;
}

.tile>div:hover{
    box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2);
}

.tile>div {
    -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
.tile .text {
    display: block;
}

@media only screen and (max-width: 500px) {
    .k-mobile .tile {
        width: 48vw;
        padding: 2vw;
        height: 44vw;
        margin: 0;
    }
}
@media only screen and (min-device-width: 500px) and (max-device-width: 1023px) {
    .k-mobile .tile {
        width: 24vw;
        padding: 1vw;
        height: 22vw;
        margin: 0;
        font-size: 15px;
        line-height: 18px;
    }
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="tiles">
        <a class="tile" href="#/contracts">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text" style="/* height: 40px; */ /* display: inline-block; */">1 Line only</span></a><a class="tile" href="#/contracts/unsigned">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/sign">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/qa">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/archive">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">1 Line only</span></a><a class="tile" href="#/feeds">
        <div>
            <div>
                <div><img src="https://image.flaticon.com/icons/svg/714/714820.svg" style="width: 56px; padding-bottom: 10px;"></div>
            </div>
        </div><span class="text">1 Line only</span></a>
        
    </div>
</body>
</html>

Upvotes: 2

Related Questions