列表溢出;文本溢出：省略号;

时间：2017-04-06 16:12:16

标签： html css overflow

我在文本溢出方面做错了什么：列表元素上的省略号？

完整的HTML代码： 

<!DOCTYPE html>
    <html>
        <head>
            <title>Seth J. Freeman - Completed/In Progress Projects</title>
            <link rel="shortcut icon" href="/Images/WebsiteIcons/Website_Icon.ico"> 
            <link rel="stylesheet" href="/Navbars/MainNavbar/Navbar Links/Projects/projects.css">
        </head>
        <body>
            <script src="/Resources/jquery-3.1.1.js"></script>
            <script src="/Resources/JQueryPlugins/Ease.js"></script>
            <script>
                $(document).ready(function() {
                    $(".NewPT").click(function(){
                    $(".NewP").animate({left: '0%', opacity: '1'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".VBP").animate({left: '100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".WebP").animate({left: '100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".PhoShopP").animate({left: '100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});

                    $(".NewP").css("display", "block");
                    $(".VBP").css("display", "none");
                    $(".WebP").css("display", "none");
                    $(".PhoShopP").css("display", "none");
                });
                $(".VBPT").click(function(){
                    $(".NewP").animate({left: '-100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".VBP").animate({left: '0%', opacity: '1'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".WebP").animate({left: '100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".PhoShopP").animate({left: '100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});

                    $(".NewP").css("display", "none");
                    $(".VBP").css("display", "block");
                    $(".WebP").css("display", "none");
                    $(".PhoShopP").css("display", "none");
                });
                $(".WebPT").click(function(){
                    $(".NewP").animate({left: '-100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".VBP").animate({left: '-100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".WebP").animate({left: '0%', opacity: '1'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                    $(".PhoShopP").animate({left: '100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});

                    $(".NewP").css("display", "none");
                    $(".VBP").css("display", "none");
                    $(".WebP").css("display", "block");
                    $(".PhoShopP").css("display", "none");
                });
                $(".PhoShopPT").click(function(){
                     $(".NewP").animate({left: '-100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                     $(".VBP").animate({left: '-100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                     $(".WebP").animate({left: '-100%', opacity: '0'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});
                     $(".PhoShopP").animate({left: '0%', opacity: '1'}, {duration: 1000, easing: 'easeInOutQuint', queue: false});

                     $(".NewP").css("display", "none");
                     $(".VBP").css("display", "none");
                     $(".WebP").css("display", "none");
                     $(".PhoShopP").css("display", "block");
                 });
             });
         </script>
         <div class="projectHolder">
             <div class="projectContainer">
                  <div class="PList">
                      <div class="NewP">
                          <div class="titleBar">
                              <div class="title">New Projects</div>
                          </div>
                      </div>
                      <div class="VBP">
                          <div class="titleBar">
                              <div class="title">Visual Basic Projects</div>
                          </div>
                          <div class="projectSectionContent">
                            <ul>
                            </ul>
                       </div>
                    </div>
                    <div class="WebP">
                        <div class="titleBar">
                             <div class="title">Web Based Projects</div>
                        </div>
                        <div class="projectSectionContent">
                            <ul>
                                <a href="/ProjectHolder/WebProjects/GoogleReplica/index.php"><li>Google.com Replica</li></a>
                                <a href=""><li>Place Holder</li></a>
                                <a href=""><li>Place Holder</li></a>
                                <a href=""><li>Place Holder</li></a>
                                <a href=""><li>Place Holder</li></a>
                                <a href=""><li>Place Holder</li></a>
                                <a href=""><li>Place Holder</li></a>
                            </ul>
                         </div>
                    </div>
                    <div class="PhoShopP">
                        <div class="titleBar">
                            <div class="title">Photoshop Projects</div>
                        </div>
                        <div class="projectSectionContent">

                        </div>
                    </div>
                </div>
                <div class="ProjectNavBar">
                     <div class="textContainer">
                         <div class="ProjectNavBText"><span class="NewPT">New Projects</span></div>
                         <div class="ProjectNavBText"><span class="VBPT">Visual Basic Projects</span></div>
                         <div class="ProjectNavBText"><span class="WebPT">Web Based Projects</span></div>
                         <div class="ProjectNavBText"><span class="PhoShopPT">Photoshop Projects</span></div>
                     </div>
                 </div>
             </div>
          </div>
    </body>
</html>

完整的css代码： 

@font-face {
    font-family: Drugs; /*I DO NOT condone non prescribed drugs, This name is set by the font designer and its easier for me to name it what the font-family was orginally named.*/
    src: url("/Fonts/Drugs/drugs.ttf") format('truetype');
         url("/Fonts/Drugs/drugs.woff") format('woff');
         url("/Fonts/Drugs/drugs.svg") format('svg');
         url("/Fonts/Drugs/drugs.eot") format('eot');
         url("/Fonts/Drugs/drugs.woff2") format('woff2');
}

@keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes navBackFadeIn{
    0% {background: #0E0E0E; border: 2px solid white;}
    100% {background: #5A5A5A; border: 2px solid #E6E6E6;}
}

body {
    background: #010101;
}

.projectHolder {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
}

.projectContainer {
    height: 60%;
    width: 70%;
    min-width: 700px;
    min-height: 350px;
    position: absolute;
    top: 20%;
    left: 15%;
    border: 1px solid white;
    overflow: hidden;
}

.ProjectNavBar {
    width: 100%;
    height: 8.8%;
    border-top: 1px solid white;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.textContainer {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ProjectNavBText {
    color: white;
    font-family: Drugs;
    font-size: 2vh;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ProjectNavBText:hover {
    color: gray;
    animation-name: colorFade;
    animation-duration: 1s;
}

@keyframes colorFade {
    0% {color: white;}
    100% {color: gray;}
}

.NewP {
    height: 90%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    display: block;
    color: white;
    opacity: 1;
}

.VBP {
    height: 90%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 100%;
    display: none;
    color: white;
    opacity: 0;
}

.WebP {
    height: 90%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 100%;
    display: none;
    color: white;
    opacity: 0;
}

.PhoShopP {
    height: 90%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 100%;
    display: none;
    color: white;
    opacity: 0;
}

.titleBar {
    height: 10%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    text-align: center;
}

.title {
    color: white;
    font-family: Drugs;
    font-size: 24px;
    padding-top: 10px;
}

.projectSectionContent {
    height: 90%;
    width: 100%;
    position: absolute;
    top: 10%;
    left: 0%;
    overflow-y: hidden;
    overflow-x: scroll;
}
.projectSectionContent::-webkit-scrollbar-track {
    background-color: #010101;
}
.projectSectionContent::-webkit-scrollbar {
     width: 12px;
     height: 6px;
     background-color: #F5F5F5;
}
.projectSectionContent::-webkit-scrollbar-thumb{
    background-color: white;
    box-sizing: border-box;
    border-radius: 15px;
}

.projectSectionContent ul {
    font-family: Drugs;
    font-size: 1.5vw;
    line-height: 30px;
    list-style-position: inside;
    max-height: 95%;
    -webkit-columns: 100px 4;
    -moz-columns: 100px 4;
    columns: 100px 4;
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
}

.projectSectionContent li {
    text-overflow: ellipsis;
}

.projectSectionContent a {
     color: white;
     text-decoration: none;
}

.projectSectionContent a:hover {
     text-decoration: underline;
}

指向特定问题的html代码： 

<div class="WebP">
    <div class="titleBar">
        <div class="title">Web Based Projects</div>
    </div>
    <div class="projectSectionContent">
        <ul>
            <a href="/ProjectHolder/WebProjects/GoogleReplica/index.php"><li>Google.com Replica</li></a>
            <a href=""><li>Place Holder</li></a>
            <a href=""><li>Place Holder</li></a>
            <a href=""><li>Place Holder</li></a>
            <a href=""><li>Place Holder</li></a>
            <a href=""><li>Place Holder</li></a>
            <a href=""><li>Place Holder</li></a>
        </ul>
    </div>
</div>

指向特定问题的css代码： 

.projectSectionContent ul {
    font-family: Drugs;
    font-size: 1.5vw;
    line-height: 30px;
    list-style-position: inside;
    max-height: 95%;
    -webkit-columns: 100px 4;
    -moz-columns: 100px 4;
    columns: 100px 4;
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
}

.projectSectionContent li {
    text-overflow: ellipsis;
}

以下是问题的屏幕截图： Visual Of Page

正如您所看到的那样，Google.com副本文本向下移动，文本溢出：省略号不会生效。

1 个答案:

答案 0 :(得分：1)

我认为您需要在li上设置一些额外的属性才能导致溢出情况：

git push origin master:bugfix
相关问题
最新问题