Question

我有一个角度指令，滚动数组中的单词并以一种方式显示它们，使其看起来好像有人正在打字（如：enter link description here）。我在将h1标记包含动态更改的字体text-align: center时遇到问题。它只是不起作用。

这是我的HTML ...

<div class='intro-div'>
    <h1 class='intro-title'>Hi, I'm Erik. I build & design</h1>
    <div class='changing-text-space-holder'>
        <h1 i-do class='intro-title changing-text'></h1>
    </div>
    <button class='hire-me-btn'>AVAILABLE FOR HIRE</button>
</div>

这是我的CSS ...

.intro-div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 55em;
}

.intro-title{
    font-family: 'WSReg';
    color: white;
    font-size: 3.5em;
    text-align: center;
}

.changing-text-space-holder{
    height: 3em;
    width: 100%;
}

.changing-text{
    border-right:  lightgrey solid;
    display: inline-block;
    text-align: center;
}

.hire-me-btn{
    border: solid white .2em;
    border-radius: 75px;
    width: 80%;
    height: 2.5em;
    background-color: transparent;
    font-size: 3em;
    font-family: 'WSReg';
    color: white;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

这是我的指示

myModule.directive('iDo', function(){
    return function(scope){
        var element = angular.element('.changing-text');
        var words = ['front-end.', 'back-end.', 'anywhere between the "ends".', 'e-commerce websites.', 'landing-pages.', 'with Javascript.', 'with Python.', 'the internet.']
        var startStopBool = false;
        var word_count = 0;
        var letter_count = 0;

        function updateText(){
            if(words[word_count] === undefined){ //if no more words in array stop
                clearInterval(frontDisplay);
            }else if(element[0].innerHTML.length === words[word_count].length){  //switch to next word
                word_count++;
                letter_count = 0;
                clearInterval(frontDisplay);
                setTimeout(function(){restartInterval()}, 2000); //wait 1 second and then restart the text
            }else{
                element[0].innerHTML += words[word_count][letter_count]
                letter_count++;
            }
        }

        function restartInterval(){
            element[0].innerHTML = '';
            frontDisplay = setInterval(updateText, 200);
        }

        var frontDisplay = setInterval(updateText, 200)  //Starts text cycle
    }         
})

Answer 1

让你的.changing-text类显示：block。

内联元素可以自然地左右各有其他元素，而块则不能。 This SO answer有一个很好的解释。

text-align：center不处理动态内联块<h1>标记

1 个答案: