Question

我正在尝试不要让我的文本块部分打断一个单词，然后跳到下一行。对于每种设备尺寸，文本都会不断出现变化，并会增加可读性。我尝试将％的权限与“ 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);
    }
}

这也是一个Codepen链接：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"
}),

在各种设备上打断下一行的单词/字母

1 个答案: