müssen die ersten drei Buchstaben des Basketballs gefolgt von Punkten zeigen

Question

• ich bin neu zu css.
• Ich habe ein großes Problem mit flex-Eigenschaft.
• wenn seine größere Größe funktioniert gut.
• aber wenn ich an die Bildschirmgröße von 320px reduziere ich Problem habe ...
• Ich brauche erste drei Buchstaben von Basketball von Punkten gefolgt zu zeigen.
• so sollte es wie Bas sein ...
• Ich habe versucht, die folgenden Eigenschaften zu geben, aber nichts funktioniert gut ..
• kann mich euch sagen, wie es zu beheben ... es Probleme mit flex ist.
• meinen Code unten und Geige Bereitstellung

@media only screen and (max-width: 320px) { 

    .sports-title { 
     border: 1px solid red !important; 
     -webkit-line-clamp: 1 !important; 
     -webkit-box-orient: vertical !important; 
     overflow: hidden !important; 
     display: -webkit-box !important; 
     padding-left: 0px !important; 
     width: 81px !important; 
     flex-grow: 0 !important; 
     flex-shrink: 0 !important; 
     flex-basis: 0px !important; 
     /* display: inline !important; */ 
     /* flex: 0 !important; */ 
     /* width: 77px !important; */ 
    } 

} 

Answer 1

Sie white-space: nowrap statt flex verwenden können, max-width statt width verwenden und fügen Sie text-overflow: ellipsis

.sports { 
 
    background: #FFF; 
 
    border-bottom: 2px solid #FFF; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    overflow: hidden; 
 
    min-height: 73px; 
 
    pointer-events: auto; 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    padding: 24px 60px 21px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
} 
 

 
.sports-leftBlock { 
 
    background: transparent url(https://www.w3schools.com/css/paris.jpg) top left no-repeat !important; 
 
    /* border: 1px solid red; */ 
 
    width: 55px; 
 
    height: 50px; 
 
    padding-left: 20px; 
 
    position: absolute; 
 
    left: 30px !important; 
 
    top: 25px !important; 
 
} 
 

 
.sports-leftBlock, 
 
.sports-rightBlock { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
.sports-title { 
 
    -webkit-flex: 1; 
 
    flex: 1; 
 
    font-size: 18px; 
 
    font-weight: 500; 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
.sports-title { 
 
    font-family: 'Mercury Display', Times, serif; 
 
    font-size: 40px !important; 
 
    line-height: 1em; 
 
    vertical-align: baseline; 
 
    z-index: 1; 
 
    font-weight: 600 !important; 
 
    left: 108px; 
 
    bottom: 25px; 
 
    right: 136px; 
 
    color: #12395B !important; 
 
} 
 

 
.sports-title { 
 
    padding-left: 50px !important; 
 
    text-align: left !important; 
 
} 
 

 
.sports-rightBlock { 
 
    left: auto; 
 
    right: 0; 
 
} 
 

 
@media only screen and (max-width: 320px) { 
 
    .sports-title { 
 
    border: 1px solid red !important; 
 
    -webkit-line-clamp: 1 !important; 
 
    -webkit-box-orient: vertical !important; 
 
    overflow: hidden !important; 
 
    padding-left: 0px !important; 
 
    max-width: 100px !important; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    /* display: inline !important; */ 
 
    /* flex: 0 !important; */ 
 
    /* width: 77px !important; */ 
 
    } 
 
} 
 

 
@media only screen and (max-width: 768px) { 
 
    .sports-leftBlock { 
 
    /* border: 1px solid black; */ 
 
    width: 63px; 
 
    height: 50px; 
 
    } 
 
}

<div class="sports"> 
 

 
    <div class="sports-leftBlock"> 
 
    </div> 
 

 
    <h1 class="sports-title"> 
 
    basketball football swimming 
 
    </h1> 
 

 
    <div class="sports-rightBlock"> 
 
    <button type="button" class="sports-close"> 
 
     <span class="screenReader">Close Pop-up Dialog</span> 
 
     <span class="sports-closeIcon"> 
 
     <span class="sports-closeIcon-icon"></span> 
 
     <span class="sports-closeIcon-highContrastGlyph" aria-hidden="true">×</span> 
 
     </span> 
 
     <span class="keyboardFocusRing"></span> 
 
    </button> 
 
    </div> 
 

 
</div>

Answer 2

ich erkannte, was Du warst versuchen zu erreichen. Ich entschuldige mich für meine erste Lösung, die das nicht berücksichtigt, aber es wurde nicht in Ihrer ursprünglichen Frage angegeben. Der Fehler wurde behoben, indem position:relative; gesetzt und anderer Code geändert wurde. Der Code unter dem Titel unter dem @media Selektor sieht nun wie folgt aus:

.sports-title { 
     white-space: nowrap; 
     overflow: hidden !important; 
     text-overflow:ellipsis; 
     max-width:100px; 
     position:relative; 
     left: 5px; 
} 

Ich hoffe, das hilft.