Некоторые письма переполняют их контейнер - можно ли что-нибудь сделать?

Question

Я заметил проблему с некоторыми буквами, переполняющими их контейнер с левой стороны, но я не видел, чтобы кто-нибудь на самом деле поднял эту проблему.

Я пробовал между несколькими различными семействами шрифтов,но все они, похоже, имеют одну и ту же проблему.

JSFIDDLE: https://jsfiddle.net/3h5poynt/

HTML (угловой)

<div class="personal-profile container-column">
<mat-card class="header">
    <section class="cover-section"></section>
    <section class="intro-section">
        <div class="intro-header">
            <div class="profile-photo-wrapper">
                <img src="/assets/img/profile-picture-placeholder.png" alt="" class="profile-photo" />
            </div>

            <div class="badges-container">
                <ul class="badges-list">
                    <li>
                        <img
                            src="/assets/badges/business-plans-180x180.png"
                            alt="Business plan"
                            matTooltip="Something"
                            matTooltipClass="badge-tooltip"
                            matTooltipPosition="above"
                        />
                    </li>
                    <li><img src="/assets/badges/calling-customers-180x180.png" alt="Calling customers" /></li>
                    <li><img src="/assets/badges/finance-180x180.png" alt="Finance" /></li>
                    <li>
                        <img src="/assets/badges/selling-to-customers-180x180.png" alt="Selling to customers" />
                    </li>
                    <li><img src="/assets/badges/social-media-180x180.png" alt="Social media" /></li>
                </ul>
            </div>
        </div>
        <div class="info-container">
            <div class="personal-info">
                <div class="name-text">{{ profile ? profile.name : '' }}</div>
                <div class="description">{{ profile ? profile.personal_description : '' }}</div>
            </div>

            <div class="additional-info"></div>
        </div>
    </section>
</mat-card>

SCSS

@import '../../../variables';

.mat-card {
    padding: 0;
    overflow: hidden;
    section {
        padding: 20px;
    }
}

.badge-tooltip {
    background: #3f51b5;
    color: white;
    font-family: $font-open-sans;
}

.personal-profile {
    margin-top: 50px;
    .header {
        min-height: 500px;
        width: 100%;

        .cover-section {
            background: url('/assets/img/coverpicture.png') center/cover;
            height: 225px;
        }

        .intro-section {
            .intro-header {
                size: auto;
                .profile-photo-wrapper {
                    position: relative;
                    margin-top: -87px;
                    display: inline-block;
                    .profile-photo {
                        width: 150px;
                        height: 150px;
                        border: 4px solid white;
                        border-radius: 10px;
                        box-shadow: inset 0 1.5px 3px 0 rgba(0, 0, 0, 0.15), 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
                        background-color: #fff;
                    }
                }

                .badges-container {
                    vertical-align: middle;
                    display: inline-block;
                    margin-top: -87px;
                    .badges-list {
                        list-style: none;
                        li {
                            float: left;
                            padding: 0 10px 0 10px;
                            img {
                                width: 40px;
                                height: 40px;
                            }
                        }
                    }
                }
            }

            .info-container {
                padding-top: 15px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                font-family: $font-open-sans;

                .personal-info,
                .additional-info {
                    display: flex;
                    flex-direction: column;
                }

                .personal-info {
                    .name-text {
                        font-size: 1.3em;
                    }
                }
            }

        }
    }
}

Основной SCSS

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import '_variables.scss';

* {
    margin: 0;
    padding: 0;
    font-family: $font-open-sans;
}

html {
    font-family: 'Roboto', sans-serif;
}
html,
body {
    height: 100%;
    width: 100%;
    background-color: #e9ebee;
}

.container-column {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto;
}

.container-row {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: auto;
}

Есть ли что-тоочень важно, что я скучаю, или это то, что нужно взломать?

Answer 1

Jonas,

Некоторые шрифты "просто так".Вы обнаружите, что (особенно с некоторыми из более любительских бесплатных шрифтов, доступных в настоящее время), что спуски, подъемы, орнаменты и т. Д. Некоторых шрифтов просто перекрывают границы, которым мы (программисты, читатели) ожидаем, что они будут соответствовать.

Если вы действительно хотите использовать такой шрифт в этом конкретном контексте, то вам нужно программировать ограничения шрифта.

В вашей скрипке я просто добавил padding-left к стилю name-text:

.name-text{
  font-size: 1.3em;
  font-family: "Open Sans", sans-serif;
  background: red;
  padding-left:15px; /* voila! */
}

Попробуйте в скрипке.

Если левая опора радикально отличается от начальных символов по всему шрифту, то вы можете установить различные стили с отступом, который изменяется в соответствии ск значению подстроки первого символа.Звучит как ад, чтобы запрограммировать это, но если вы действительно этого хотите, то идите.

Или вы можете просто выбрать другой шрифт.