问在各种设备上插入到下一行的单词/字母
EN

Stack Overflow用户

提问于 2018-07-04 13:22:11

回答 1查看 21关注 0票数 0

我试图不让我的文本块，打破一个词的部分，并跳转到下一行。对于每一个设备大小，文本都会中断，并会产生可读性问题。我试着在%s中使用marring右，但实际上没有多大帮助。

这是我的小狗代码：

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

谢谢你的时间和指导。

css

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-04 13:35:01

这不是CSS/SASS问题，而是与如何定义SplitText插件的配置/选项有关。配置使用type: "chars"，它告诉SplitText按字符而不是按word进行拆分。这意味着有一种可能性，在某些宽度，您的字符串将被分割在一个单词内，而不是在单词之间。要避免这种情况，只需将其更改为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"
}),