需要在 CSS 中仅隐藏 onclick 下拉菜单中的溢出文本，但这样做会破坏功能

Question

我有一个 css onclick 下拉菜单，里面有动态内容，所以当它是一个很长的字符串时，我需要截断或隐藏它。我试过 'overflow: hidden' 但它破坏了下拉菜单，因此子菜单不再下拉。

希望我已经正确解释了我的问题！

我的html:

<ul id="menu">
    <li>
        <input id="check01" type="checkbox" name="menu"/>
        <label for="check01">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</label>
        <ul class="submenu">
            <li><a href="#">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</a></li>
            <li><a href="#">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</a></li>
        </ul>
    </li>
    </ul>

我的CSS:

/*Style for the first level menu bar*/
ul#menu{
    position:fixed;
    top:0;
    height:3em;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #fff;
    float: left;
    margin-right: 1em;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: .9em;
    max-width: 85%;
    width: auto;
}

ul#menu > li{
    float:left;
    list-style-type:none;
    position:relative;
}

label{
    position:relative;
    display:block;
    padding:0 18px 0 12px;
    line-height:3em;
    transition:background 0.3s;
    cursor:pointer;
}

label:after{
    content:"";
    position:absolute;
    display:block;
    top:50%;
    right:5px;
    width:0;
    height:0;
    border-top:4px solid rgba(255,255,255,.5);
    border-bottom:0 solid rgba(255,255,255,.5);
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    transition:border-bottom .1s, border-top .1s .1s;
}

label:hover,
input:checked ~ label{
    background:rgba(0,0,0,.3);
}

input:checked ~ label:after{
    border-top:0 solid rgba(255,255,255,.5);
    border-bottom:4px solid rgba(255,255,255,.5);
    transition:border-top .1s, border-bottom .1s .1s;
}

/*hide the inputs*/
input{
    display:none
}

/*show the second levele menu of the selected voice*/
input:checked ~ ul.submenu{
    max-height:300px;
    transition:max-height 0.5s ease-in;
}

/*style for the second level menu*/
ul.submenu{
    max-height:0;
    padding:0;
    overflow:hidden;
    list-style-type:none;
    background:#444;
    box-shadow:0 0 1px rgba(0,0,0,.3);
    transition:max-height 0.5s ease-out;
    position:absolute;
    min-width:100%;
}

ul.submenu li a{
    display:block;
    padding:12px;
    color:#ddd;
    text-decoration:none;
    box-shadow:0 -1px rgba(0,0,0,.5) inset;
    transition:background .3s;
    white-space:nowrap;
}

ul.submenu li a:hover{
    background:rgba(0,0,0,.3);
}

编辑：

抱歉，我第一次在这个网站上发帖...希望这更清楚....请忽略上面的代码并在此处查看我的 fiddle：https://jsfiddle.net/xw7hzmky/6/

我要应用溢出：隐藏；和文本溢出：省略号；（或剪辑）到 ul#menu，虽然它做了我想要的，但它最终也隐藏了我的下拉菜单。我需要保持宽度：自动；最大宽度：85%；以便它根据字符串调整大小，当它很短时看起来不错，如果它很长则不会超过某个点（85％）......在那一点上，我希望截断它，因此我的问题。任何帮助将不胜感激！提前致谢！

编辑：

非常感谢大家的帮助，@Mridul Kashyap 帮我解决了。非常感谢您的宝贵时间！

Answer 1

您可以使用 CSS3 text-overflow 属性

#div1 {
    white-space: nowrap;
    width: 12em;
    overflow: hidden;
    text-overflow: clip;
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap;
    width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #000000;
}

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>

已添加到您的下拉菜单中 https://codepen.io/anon/pen/dXALwg

Answer 2

为 "ul.submenu" 尝试固定 "width" 并添加 "text-overflow" 到 "ul.submenu li a"。像这样，

ul.submenu {
   width : 150px;
}

ul.submenu li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 3

检查这是否适合您：

/*----- Dropdown -----*/
/*Style for the first level menu bar*/
ul#menu{
  position:fixed;
  top:0;
  max-width:85%; 
  height:3em;
  padding:0;
  color: #141c30;
  display: inline-block;
  vertical-align: middle;
  font-size: .9em;
  -webkit-transition: all 0.10s ease-in-out;
  -moz-transition: all 0.10s ease-in-out;
  transition: all 0.15s ease-in-out;
  background: #cbced0;
}
ul#menu > li{
  width:100%;
  float:left;
  list-style-type:none;
}
ul#menu:hover{
 color: #38a3af;
}
label{
 position:relative;
 display:block;
 line-height:3em;
 transition:background 0.3s;
 cursor:pointer;
  padding-left: 12px;
  padding-right: 20px;
  max-width:85%;
  overflow:hidden;
  whitespace:nowrap;
  text-overflow:ellipsis;
}

label:after{
 content:"";
 position:absolute;
 display:block;
 top:50%;
 right:5px;
 width:0;
 height:0;
 border-top:4px solid rgba(0,0,0,.5);
 border-bottom:0 solid rgba(0,0,0,.5);
 border-left:4px solid transparent;
 border-right:4px solid transparent;
 transition:border-bottom .1s, border-top .1s .1s;
}


input:checked ~ label:after{
 border-top:0 solid rgba(255,255,255,.5);
 border-bottom:4px solid rgba(255,255,255,.5);
 transition:border-top .1s, border-bottom .1s .1s;
}

/*hide the inputs*/
input{display:none}

/*show the second levele menu of the selected voice*/
input:checked ~ ul.submenu{
 max-height:300px;
 transition:max-height 0.5s ease-in;
}

/*style for the second level menu*/
ul.submenu{
  max-width:85%;
 max-height:0;
 padding:0;
 overflow:hidden;
 list-style-type:none;
 background:#26162f;
 box-shadow:0 0 1px rgba(0,0,0,.3);
 transition:max-height 0.5s ease-out;
 position:absolute;
 -webkit-transition: all 0.10s ease-in-out;
 -moz-transition: all 0.10s ease-in-out;
 transition: all 0.15s ease-in-out;
}

ul.submenu li{
  max-width:100%;
}

ul.submenu li a{
  max-width:100%;
 display:block;
 padding:12px;
 color:#ddd;
 text-decoration:none;
 box-shadow:0 -1px rgba(0,0,0,.5) inset;
 transition:background .3s;
 white-space:nowrap;
}

ul.submenu li a:hover{
 background:#371f44;
 color: #38a3af;

}

ul.submenu li a{
  overflow:hidden;
  whitespace:nowrap;
  text-overflow:ellipsis;
}

<ul id="menu">
       <li>
        <input id="check01" type="checkbox" name="menu"/>
        <label for="check01">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</label>
        <ul class="submenu">
        <li><a href="#">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</a></li>
        <li><a href="#">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</a></li>
        </ul>
       </li>
       </ul>

我刚刚为必要的元素添加了宽度。以及一些 overflow、whitespace 和 text-overflow 属性。

需要在 CSS 中仅隐藏 onclick 下拉菜单中的溢出文本，但这样做会破坏功能

Need to hide overflow text in CSS only onclick dropdown, but doing so breaks the functionality

html

css

overflow

onclick

drop-down-menu