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

Question

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

这是我的哈巴狗代码：

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"
}),