Question

我注意到某些字母在左侧的容器中溢出的问题，但我还没有看到有人真正提出这个问题。

我尝试了几种不同的字体家族，但是它们似乎都存在相同的问题。

J overflowing T not overflowing (maybe a little, but very minor)

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

乔纳斯，

某些字体“就是那样”。您会发现（尤其是当今使用的一些更为业余的免费字体）某些字体的下降，上升，装饰等与我们（程序员，读者）期望它们遵循的边界重叠。

如果您真的想在这种特定的上下文中使用这样的字体，那么就必须绕过字体的限制进行编程。

在您的小提琴中，我仅将padding-left添加到了name-text样式中：

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

尝试一下小提琴。

如果整个字体的初始字符的左轴承根本不同，则您可以设置各种样式，并使用填充根据第一字符的子字符串值而变化。听起来像是一个活生生的地狱，但是要编程就可以了。

或者您可以选择其他字体。

某些字母溢出其容器-可以做什么？

1 个答案: