不能使文本溢出为省略号

我试图让两个文本部分隐藏自身，当右边的空间不可用时。例如，如果空间右边是不可用，则一个过长...文本应该变得像一个...... 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

不能使文本溢出为省略号

回答

相关问题