在各种设备上插入到下一行的单词/字母
在各种设备上插入到下一行的单词/字母
提问于 2018-07-04 21:22:11
我试图不让我的文本块，打破一个词的部分，并跳转到下一行。对于每一个设备大小，文本都会中断，并会产生可读性问题。我试着在%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
谢谢你的时间和指导。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-04 21: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"
}),页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51180886
复制相关文章
相似问题
腾讯云开发者
