Listenüberlauf; Textüberlauf: Ellipse;

Was mache ich falsch mit Textüberlauf: Ellipse auf meinem Listenelement?Listenüberlauf; Textüberlauf: Ellipse;

vollständigen HTML-Code:

<!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>

Voll CSS-Code:

@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; 
}

zeigt auf dem spezifischen Problem HTML-Code:

<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>

spezifisches Problem CSS-Code zeigt auf:

.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; 
}

Hier ist ein Screenshot des Problems:

Wie Sie die Google.com Replica Text eine Linie bewegt sich nach unten sehen kann und die Textüberlauf: Ellipse wirkt nicht.

Quelle

2017-04-06 Anonymous

Ich glaube, Sie brauchen einige zusätzliche Eigenschaften auf li einzustellen, um den Überlauf zu verursachen:

.projectSectionContent li { 
    overflow: hidden; 
    white-space: nowrap; 
    max-width: 100px; 
    max-height: 1.5em; 
    text-overflow: ellipsis; 
}

Quelle

2017-04-06 16:33:17 chodgson

Dies ist, wie sich herausstellte: https://ibb.co/kGGZiv –

die Antwort anzeigen hier: http://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working – chodgson

Wenn das es löst, werde ich diese Frage schließen, sobald es funktioniert. Danke für den Link! :) –

Listenüberlauf; Textüberlauf: Ellipse;

Antwort

Verwandte Themen