时间戳

首页 > 解决方案 > 修复移动设备上的光标效果

html - 修复移动设备上的光标效果

问题描述

我正在使用以下代码来实现类型和删除效果。

在移动设备上，当文本最终占用超过 1 行时，光标（使用文本右边框实现）最终换行两行。像这样：（红色圈出的光标）

在此处输入图像描述

当然，这不是我想要的。

我希望光标只跨越 1 行（如下所示）。有没有办法来解决这个问题？

在此处输入图像描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">

body {
    font-family: Arial;
    font-size: 100px;
}

#container {
    margin: 50px 0 0 0;
    text-align: center;
}

#text {
    display: inline-block;
    color: #2980b9;
    border-right: 3px solid #2980b9;
}

</style>
</head>

<body>

<div id="container">
    <div id="text"></div>
</div>

<script type="text/javascript">

// List of sentences
var _CONTENT = [ "Twinkle, twinkle, little star", "How I wonder what you are", "Up above the world so high", "Like a diamond in the sky" ];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Implements typing effect
function Type() { 
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;

    // If full sentence has been displayed then start to delete the sentence after some time
    if(text === _CONTENT[_PART]) {
        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 1000);
    }
}

// Implements deleting effect
function Delete() {
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;

    // If sentence has been deleted then start to display the next sentence
    if(text === '') {
        clearInterval(_INTERVAL_VAL);

        // If last sentence then display the first one, else move to the next
        if(_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;
        _PART_INDEX = 0;

        // Start to display the next sentence after some time
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
    }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);

</script>

</body>

标签： htmljquerycss

解决方案

在元素上#text添加样式display: initial;或display: inline;

// List of sentences
var _CONTENT = ["Twinkle, twinkle, little star", "How I wonder what you are", "Up above the world so high", "Like a diamond in the sky"];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Implements typing effect
function Type() {
    var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;

    // If full sentence has been displayed then start to delete the sentence after some time
    if (text === _CONTENT[_PART]) {
        clearInterval(_INTERVAL_VAL);
        setTimeout(function () {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 1000);
    }
}

// Implements deleting effect
function Delete() {
    var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;

    // If sentence has been deleted then start to display the next sentence
    if (text === '') {
        clearInterval(_INTERVAL_VAL);

        // If last sentence then display the first one, else move to the next
        if (_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;
        _PART_INDEX = 0;

        // Start to display the next sentence after some time
        setTimeout(function () {
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
    }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
body {
    font-family: Arial;
    font-size: 100px;
}

#container {
    margin: 50px 0 0 0;
    text-align: center;
}

#text {
    display: initial;
    color: #2980b9;
    border-right: 3px solid #2980b9;
}
<div id="container">
    <div id="text"></div>
</div>

推荐阅读