不能使文本溢出爲省略號

我試圖讓兩個文本部分隱藏自身，當右邊的空間不可用時。例如，如果空間右邊是不可用，則一個過長...文本應該變得像一個...... Loooon不能使文本溢出爲省略號

但問題是，文本只是獲取父DIV中時隱時我調整瀏覽器沒有期望的行爲。
以下是我試圖做的。

html, 
 
body { 
 
    background-image: url("../images/theme1.png"); 
 
    background-repeat: repeat; 
 
} 
 

 
.topNav { 
 
    background-color: rgba(255, 255, 255, 1); 
 
    border: none; 
 
    min-height: 60px; 
 
} 
 

 
.userNavL, 
 
.userNavR { 
 
    height: 60px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    cursor: default; 
 
} 
 

 
.userNavL { 
 
    width: 70vw; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.userNavR { 
 
    width: 30vw; 
 
} 
 

 
.leftside { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    vertical-align: middle; 
 
    margin-right: 5px; 
 
} 
 

 
.rightside { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.username { 
 
    font-size: 20px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.lastSeen { 
 
    display: block; 
 
    font-size: 13px; 
 
    padding-top: 2px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.profilePic { 
 
    width: 40px; 
 
    height: 40px; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar topNav"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand userNavL" style="background-color: #0f0f0f;"> 
 
     <div class="leftside"> 
 
      <span class="ionicons ion-android-arrow-back icon"></span> 
 
     </div> 
 
     <div class="rightside" style="background-color: #5cb85c;"> 
 
      <span class="username">A big long name with a big surname</span> 
 
      <span class="lastSeen">Last seen yesterday at 10:45 PM</span> 
 
     </div> 
 
     </a> 
 
     <!-- 
 
       <a class="navbar-brand userNavR" style="background-color: #3c3c3c;"> 
 
        <img src="images/no_dp.png" class="img-responsive img-circle pull-right profilePic"> 
 
       </a>--> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2017-09-02 Ayan

您試圖添加text-overflow:ellipsis爲green background div，如果是的話那麼它是displayed作爲inline-block，使div的width將是相同text目前認爲div內因而不會有任何overflow，你不能獲得作爲風格text-overflow:ellipsis。因此，請添加手冊width以獲取該輸出。

.rightside { 
    width: 80%; 
    display: inline-block; 
    vertical-align: middle; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

html, 
 
body { 
 
    background-image: url("../images/theme1.png"); 
 
    background-repeat: repeat; 
 
} 
 

 
.topNav { 
 
    background-color: rgba(255, 255, 255, 1); 
 
    border: none; 
 
    min-height: 60px; 
 
} 
 

 
.userNavL, 
 
.userNavR { 
 
    height: 60px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    cursor: default; 
 
} 
 

 
.userNavL { 
 
    width: 70vw; 
 
    overflow: hidden; 
 
} 
 

 
.userNavR { 
 
    width: 30vw; 
 
} 
 

 
.leftside { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    vertical-align: middle; 
 
    margin-right: 5px; 
 
} 
 

 
.rightside { 
 
    width: 60%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.username { 
 
    font-size: 20px; 
 
} 
 

 
.lastSeen { 
 
    display: block; 
 
    font-size: 13px; 
 
    padding-top: 2px; 
 
    overflow: hidden; 
 
} 
 

 
.profilePic { 
 
    width: 40px; 
 
    height: 40px; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar topNav"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand userNavL" style="background-color: #0f0f0f;"> 
 
     <div class="leftside"> 
 
      <span class="ionicons ion-android-arrow-back icon"></span> 
 
     </div> 
 
     <div class="rightside" style="background-color: #5cb85c;"> 
 
      <span class="username">A big long name with a big surname</span> 
 
      <span class="lastSeen">Last seen yesterday at 10:45 PM</span> 
 
     </div> 
 
     </a> 
 
     <!-- 
 
       <a class="navbar-brand userNavR" style="background-color: #3c3c3c;"> 
 
        <img src="images/no_dp.png" class="img-responsive img-circle pull-right profilePic"> 
 
       </a>--> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2017-09-02 14:42:30 frnt

好吧，很好的改進:)但仍然是最後看到不會變成省略號，你仍然可以看到右邊一些剩餘的黑色部分。有什麼關係嗎？ – Ayan

@Ayan字體大小對於username和lastseen都不相同，你可以指定寬度以lastseen並且希望得到相同的輸出。 – frnt

文本溢出將需要容器元素的寬度..所以給你的容器的寬度。

，你應該利用媒體做小寬度查詢

/* my addition */ 
 

 
.username, 
 
.lastSeen { 
 
    display: inline-block; 
 
    width: 140px; 
 
} 
 
    
 
/* my addition ends here */ 
 

 

 
html, 
 
body { 
 
    background-image: url("../images/theme1.png"); 
 
    background-repeat: repeat; 
 
} 
 

 

 
.topNav { 
 
    background-color: rgba(255, 255, 255, 1); 
 
    border: none; 
 
    min-height: 60px; 
 
} 
 

 
.userNavL, 
 
.userNavR { 
 
    height: 60px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    cursor: default; 
 
} 
 

 
.userNavL { 
 
    width: 70vw; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.userNavR { 
 
    width: 30vw; 
 
} 
 

 
.leftside { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    vertical-align: middle; 
 
    margin-right: 5px; 
 
} 
 

 
.rightside { 
 
    /* make display block for full width */ 
 
    /* display: inline-block; */ 
 
    vertical-align: middle; 
 
} 
 

 
.username { 
 
    font-size: 20px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.lastSeen { 
 
    display: block; 
 
    font-size: 13px; 
 
    padding-top: 2px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.profilePic { 
 
    width: 40px; 
 
    height: 40px; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar topNav"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand userNavL" style="background-color: #0f0f0f;"> 
 
     <div class="leftside"> 
 
      <span class="ionicons ion-android-arrow-back icon"></span> 
 
     </div> 
 
     <div class="rightside" style="background-color: #5cb85c;"> 
 
      <span class="username">A big long name with a big surname</span> 
 
      <span class="lastSeen">Last seen yesterday at 10:45 PM</span> 
 
     </div> 
 
     </a> 
 
     <!-- 
 
       <a class="navbar-brand userNavR" style="background-color: #3c3c3c;"> 
 
        <img src="images/no_dp.png" class="img-responsive img-circle pull-right profilePic"> 
 
       </a>--> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2017-09-02 14:20:02

好吧，但我想使課堂'rightside'佔用剩餘父'userNavL'的空間。這不可能嗎？通過一種簡單的方式讓你明白，我希望這個名字和最後一次看到的空間和黑色區域一樣多。當黑色部分比文本短時，文本進入省略號。只使用CSS是優先選擇的。 :( – Ayan

編輯請檢查 –

在這個編輯，你可以看到，綠色區域只是左下方:(在發佈問題之前我能夠實現這一點，但這不是我尋找的不幸。應該在同一行，並在黑色div :(和黑色div大小減少時，文本應該進入省略號 – Ayan

不是很確定，如果HTML和CSS真的會做你需要什麼樣的滿意率，你可能需要。您可以限制div的寬度，但這也意味着您的設計在某些屏幕尺寸上可能不會如此敏感。

你可以做的是使用JavaScript來解決它就像從這個鏈接話題>> How do I only display part of a string using css

或在這裏發現了這個其他物品，保持CSS >>https://quirksmode.org/css/user-interface/textoverflow.html

來源

2017-09-02 14:26:18 mw509

我正在尋找一些純粹的CSS方式 – Ayan

不能使文本溢出爲省略號

回答

相關問題