javascript - 基于视口(viewport)宽度逐渐消失的文本......带省略号......!

Question

我有一个包含两个列表项的无序列表，绝对位于视口(viewport)的右上角。

<header id="top-bar">
    <ul>
        <li>
            <a href="#">David Bowie</a>
        </li>
        <li>
            <a href="../includes/sign_out.php" class="signUp"     name="signUp">Sign Out</a>
        </li>
    </ul>

#top-bar {
    height:47px;
    background-color:rgb(43, 165, 43);
    border-bottom:3px solid rgb(22, 83, 22);
    font-size:0.75em;
    position:relative;
    z-index:1;
}
#top-bar ul {
    margin:0; padding:0 0.25em;
    position:absolute;
    right:0px;
}
#top-bar ul > li {
    display:inline;
    float:left;
    line-height:47px;
    position: relative;
    z-index:2;
}
#top-bar ul > li:first-child{
    margin-left:0.45em;
    background:orange; /* testing purposes */
}

最后一个 child li 的内容永远不会改变。但是，第一个 child li 的内容是可变的。

在全视口(viewport)宽度下，变量内容影响不大。但是随着视口(viewport)缩小，尤其是在移动视口(viewport)中，文本应该开始在包含 div 的后面后退，并且一系列 (...) 应该代替后退的隐藏文本。在一定宽度时，包含的li 的大小将固定，后退将停止。

我不太确定如何执行此操作。这可以纯粹用 CSS 来完成吗？我觉得 Javascript 必须在替换省略号的内容方面发挥作用。

不幸的是，我没有太多的编程经验，尤其是在 Javascript 方面，我有点急于开发它。

如果你们中有更自然的程序员知道如何处理这个问题，我很乐意听取您的意见。

谢谢。

Answer 1

您可以使用 CSS3 为 chop 的文本创建省略号 text-overflow .

<style>
ul{
    background: #aaa;
    font: 12px sans-serif;
    padding: 10px;
}
li{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

<ul>
    <li>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>
</ul>