Question

我正在尝试创建一个叠加层，上面写着：'等待......'，但我希望动画可以设置省略号。所以文本实际上来自： -

'Waiting' -> 'Waiting.' -> 'Waiting..' -> 'Waiting...' -> 'Waiting' ->

然而，当椭圆计数改变时，它正在向左推“等待”，因为内容在其容器中居中。

HTML：

<div style='text-align: center'>
  <span>Waiting</span>
  <span id='ellipses'></span>
</div>

使用Javascript：

var ellipses = 0;
setInterval(function () {
    $('#ellipses').text('.'.repeat(ellipses))
    ellipses = (ellipses + 1) % 4;
}, 400)

有什么好方法可以解决这个问题吗？很容易用一些神奇的数字或者手动计算'center'是一个固定的位置，但是如果可能的话我想要一个干净的css解决方案.. < / p>

Answer 1

使用纯CSS，试试这个Fiddle，

Answer 2

尝试将以下内容添加到您的样式中：

<?php
class ExcelFile {

    private
    $csv = Null;

    function Colonne($file) {

        $this->csv.=$file."\n";
        return $this->csv;

    }


    function Insertion($file){

        $this->csv.=$file."\n";
        return $this->csv;
    }


    function output($NomFichier){

        header("Content-type: application/vnd.ms-excel");
        header("Content-disposition: attachment; filename=$NomFichier.csv");
        print $this->csv;
        exit;

    }
}

?>

Answer 3

将省略号放在after伪元素中，并将其位置声明为绝对值。我创建了一个小提琴手来演示这种行为。省略号取决于鼠标指针悬停在第二条（中间）线上以进行演示：http://jsfiddle.net/f9eutj40/

HTML：

<div>
    <span>
        The first line
    </span>
    </br>
    <span class="ellipsis">
        The second line
    </span>
        </br>
    <span>
        The third line
    </span>
</div>

CSS：

div { 
    text-align: center; 
    background-color: green;
}
span {
    color: cyan;
}
span.ellipsis:hover:after {
    color: cyan;
    content: ".....";
    position: absolute;
}

这样你甚至不必修改文本本身（并在之后再次清理......）。您只需修改文本的样式。这是在上面的演示中使用content:规则以静态方式完成的，但没有任何事情可以反对做这种动态。

如果文本居中，我怎样才能在一个方向上“增长”文本？

3 个答案: