【发布时间】：2020-09-02 19:26:42
【问题描述】：
我正在尝试在三个span 元素中的“&”字符后添加换行符。
具体来说，这里：
<span class="word pomegranate text_animation">creativity ＆
categories</span>
<span class="word wisteria text_animation">form ＆
function</span>
<span class="word belize text_animation">style ＆
systems</span>
在上面的代码中，&#65286 是与号 (&)。我想在这个＆符号之后直接创建一个换行符（并尝试使用空格和上面显示的物理换行符）。
我创建了this lovely codepen 的个性化版本，但遇到了问题。我正在使用white-space: pre-wrap; 在每个span 中添加一个换行符，并带有旋转文本。我之所以使用这个特殊的 css 属性是因为我已经尝试过使用 <br>、\n、\r\n、&#9252;、&#x2424;、&#013; 和 &#010;，但没有运气（应用和不应用 white-space 属性）。我已经设法用下面的 sn-p 重新创建了这个问题。我错过了什么吗？在不使用white-space 属性的情况下，有没有更好的方法来解决这个问题？
TLDR;我无法在span 中的 & 符号后创建换行符。 span 是动画的。
编辑：我在 sn-p 中添加了一些 cmets，以突出显示我认为是导致此问题的代码。请参阅 .js 和 .css sn-ps 顶部的 cmets。
//not necessary to read through all of this, only thing that might be important is that
//each character in the original span is taken as a single letter for animation purposes
// (see line 25 for change word function)
var creativityAndCategories = document.querySelector('.pomegranate');
var styleAndSystems = document.querySelector('.belize');
var formAndFunction = document.querySelector('.wisteria');
factorForWidth();
function factorForWidth() {
var mywidth = window.innerWidth;
if (mywidth < 1170) {}
}
var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;
words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
splitLetters(words[i]);
}
function changeWord() {
var cw = wordArray[currentWord];
var nw = currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}
for (var i = 0; i < nw.length; i++) {
nw[i].className = 'letter behind';
nw[0].parentElement.style.opacity = 1;
if (nw.length == 15) {
if (i < 5) {
nw[i].style.color = "#d67c5c";
}
if (i == 5 || i == 6) {
nw[i].style.color = "black";
}
if (i >= 7) {
nw[i].style.color = "#71acc1";
}
}
if (nw.length == 23) {
if (i < 11) {
nw[i].style.color = "#d67c5c";
}
if (i == 11) {
nw[i].style.color = "black";
}
if (i >= 12) {
nw[i].style.color = "#71acc1";
}
}
animateLetterIn(nw, i);
}
currentWord = (currentWord == wordArray.length - 1) ? 0 : currentWord + 1;
}
function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = 'letter out';
}, i * 80);
}
function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = 'letter in';
}, 340 + (i * 80));
}
function splitLetters(word) {
var content = word.innerHTML;
word.innerHTML = '';
var letters = [];
for (var i = 0; i < content.length; i++) {
var letter = document.createElement('span');
letter.className = 'letter';
letter.innerHTML = content.charAt(i);
word.appendChild(letter);
letters.push(letter);
}
wordArray.push(letters);
}
changeWord();
setInterval(changeWord, 5000);/* ---------------- css that relates to the issue ------------------*/
.word {
position: absolute;
width: 100%;
opacity: 0;
white-space: pre;
}
.text_animation {
font-weight: 600 !important;
margin: 0 !important;
line-height: 5.944rem;
}
/* ---------------- css you don't have to worry about --------------------- */
/* ------------- but is included for snippet functionality --------------- */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
.invisible_text {
color: transparent !important;
line-height: 5.944rem;
font-weight: 600 !important;
margin: 0;
}
.rotating_text_container {
position: relative;
width: 100%;
}
.my_rotating_text {
position: absolute;
width: 100%;
left: 0;
height: 400px;
top: 12px;
}
.kb_rotating {
line-height: 5.944rem;
}
.kb_text {
display: block;
vertical-align: top;
margin: 0;
font-weight: 600;
font-size: 4.833rem;
}
@media screen and (max-width: 990px) {
.kb_text {
font-size: 4.278rem;
}
.text_animation,
.kb_rotating,
.invisible_text {
line-height: 5.278rem;
}
}
@media screen and (max-width: 765px) {
.kb_text {
font-size: 3.722rem;
}
.text_animation,
.kb_rotating,
.invisible_text {
line-height: 4.5rem;
}
}
@media screen and (max-width: 550px) {
.kb_text {
font-size: 3.278rem;
}
.text_animation,
.kb_rotating,
.invisible_text {
line-height: 4.5rem;
}
}
.letter {
display: inline-block;
position: relative;
float: left;
transform: translateZ(25px);
transform-origin: 50% 50% 25px;
}
.letter.out {
transform: rotateX(90deg);
transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
transform: rotateX(-90deg);
}
.letter.in {
transform: rotateX(0deg);
transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wisteria {
color: gray;
}
.belize {
color: black;
}
.pomegranate {
color: red;
}
.green {
color: #16a085;
}
.midnight {
color: #2c3e50;
}<div class="rotating_text_container">
<p class="invisible_text kb_text">Solving problems at the intersection of creativity & categories</p>
<div class="my_rotating_text">
<p class="text_animation kb_text">Solving problems at the intersection of</p>
<p class="kb_text kb_rotating">
<span class="word pomegranate text_animation">creativity ＆
categories</span>
<span class="word wisteria text_animation">form ＆
function</span>
<span class="word belize text_animation">style ＆
systems</span>
</p>
</div>
</div>【问题讨论】：
-
你能把这个减少到证明问题所需的最低限度吗？
标签： javascript html css newline