バスケットボールの最初の3文字にドットを続けて表示する必要があります。

Question

• 私はCSSの新機能です。
• 私はflexプロパティで大きな問題を抱えています。
• その大きなサイズのときは正常に動作します。
• が、私は320PXの画面サイズに減らしたとき、私は、問題を持っています...
• 私はドットが続くバスケットボールの最初の3つの文字を表示する必要があります。
• ので、それはバようにする必要があります...
• 私はあなたたちはフレックスに問題がある...それを修正する方法を教えてくださいすることができます
• ..罰金以下の性質を与えることが、何も作業していない試してみました。
• は、以下の私のコードを提供して

@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

をいじるあなたは、white-space: nowrap代わりのflexを使用する代わりにwidthのmax-widthを使用して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

を追加することができ、私は何を実現あなたは達成しようとしている。私はそれを取り入れないで私の最初の解決には謝罪しますが、あなたの元の質問では特定されませんでした。エラーは、position:relative;を設定し、他のコードを変更することで修正されました。 @mediaセレクタの下のタイトルのコードは、次のようになります。

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

私は役に立つと思います。