css - 在各种设备上换行的单词/字母

Question

我尽量不让我的文本 block 把一个词分成几个部分并跳到下一行。对于每种设备尺寸，文本都会中断并造成可读性问题。我尝试将 marring-right 与 % 一起使用，但并没有太大帮助。

这是我的哈巴狗代码:

div(class="container")
        div(class="row u-full-height")
            div(class="intro col-xs-12 col-sm-10 col-md-10 col-lg-10")
                p(id="js-intro-content-identifier" class="intro__content-identifier")
                    | Home
                h1(id="js-intro-heading" class="intro__heading")
                    | It is a long established fact that a 
                    | reader will be distracted by the 
                    | readable content of a page. 
                p(id="js-intro-description" class="intro__description type--color-green")
                    | 20+ years of experience 
                div(class="intro__scroll")
                   a(href="" class="scroll type--captialize") scroll
                        span(class="scroll-indicator")

这是我的 scss:

.intro {
    align-self: center;
    @media screen and (orientation: landscape) and (max-width: 815px) {
        margin-top: 4rem;
    }
    &__heading, &__description{
        // opacity: 0;
    }
    &__heading {
        font-size: 2.125rem;
        line-height: 1.25;
        // font-family: $type-font--cormorant-garamond;
        font-weight: 500;
        // letter-spacing: 0.05rem;
        // margin-right: 10%;
        @media screen and (min-width: 1000px)
         {
            font-size: 46px;
        }
    }
    &__description, &__content-identifier {
        // @include text(.8rem, 0, 0);
        color: grey;
        margin-bottom: 0.4rem; 
        text-transform: uppercase;
        letter-spacing: 0.2rem;

        // @include for-tablet-portrait-up{
        //     font-size: 1.4rem;
        // }
        // @include for-tablet-landscape-up{
        //     font-size: 1.2rem;
        // }
    }

    &__scroll{
        display: block;
        // display: none;
        // @include for-tablet-portrait-up{
        //     display: block;
        // }
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10%;

        .scroll{
            color: white;
            font-size: .8rem;
        }

        .scroll-indicator{
            height: 70px;
            width: 1px;
            // background-color: #333;
            display: block;
            position: relative;
            left: 53%;
            transform: translateX(-50%);
            top: 20px;
            // overflow: hidden;

            &:after{
                content: '';
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background: linear-gradient(transparent, green, transparent);
                animation: scrollindicator 3s ease-out infinite;
            }


        }
    }
}

@keyframes scrollindicator{
    0%{
        transform-origin: top;
        transform: scaleY(0);
    }
    50%{
        transform-origin: top;
        transform: scaleY(1);
    }
    51%{
        transform-origin: bottom;
        transform: scaleY(1);
    }
    100%{
        transform-origin: bottom;
        transform: scaleY(0);
    }
}

这里还有一个代码笔链接:https://codepen.io/harp30/pen/oyRLOe?editors=0110

感谢您的宝贵时间和指导。

Answer 1

这不是 CSS/SASS 问题——而是与您如何定义 SplitText 插件的配置/选项有关。您正在使用 type: "chars" 作为配置，它告诉 SplitText 按字符而不是单词拆分。这意味着在某些宽度下，您的字符串有可能在一个词内而不是在词之间被分割。要避免这种情况，只需将其更改为 type: "words" 即可解决问题。

代替这个:

introSplitText_CI = new SplitText(jsLandingContentIdentifier, {
    type: "char"
}),
introSplitText_Heading = new SplitText(jsLandingHeading, {
    type: "char"
}),

……你应该使用这个:

introSplitText_CI = new SplitText(jsLandingContentIdentifier, {
    type: "words"
}),
introSplitText_Heading = new SplitText(jsLandingHeading, {
    type: "words"
}),