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

Question

I have a css onclick dropdown menu that will have dynamic content in it, so when it is a very long string, I need it to truncate or hide. I tried 'overflow: hidden' but it breaks the dropdown so that the submenu doesn't dropdown anymore.

I hope I've explained my issue properly!

My 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>

My 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);
}

EDIT:

Sorry, my first time posting on this site... hopefully this is more clear.... Please ignore the above code and check out my fiddle here instead: https://jsfiddle.net/xw7hzmky/6/

I want to apply overflow: hidden; and text-overflow: ellipsis; (or clip) to the ul#menu, and while it does what I want, it ends up hiding my dropdown as well. I need to keep the width: auto; and max-width: 85%; so that it resizes depending on the string, looking nice when its short, and not going beyond a certain point (85%) if its long... at that point, I am hoping to truncate it, hence my issues. Any help would be greatly appreciated! Thank you so much in advance!

EDIT:

Thanks so much for the help everyone, @Mridul Kashyap solved it for me. Thanks so much for all your time!

can't reproduce the problem with given code. please paste the generated html instead. — Mridul Kashyap
– Mridul Kashyap, Commented Aug 18, 2016 at 5:01
check this fiddle you're missing something. the menu doesn't seem to work at all. is there any javascript that you didn't post? — Mridul Kashyap
– Mridul Kashyap, Commented Aug 18, 2016 at 5:28
Updated my question with a working fiddle example. Sorry, should have done that earlier, but thought I had to create an account :P Thanks so much for your time. — Mel
– Mel, Commented Aug 18, 2016 at 6:28

Shahil Mohammed · Accepted Answer · 2016-08-18 06:48:30Z

2

You can use CSS3 text-overflow property

#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>

Added for your drop down https://codepen.io/anon/pen/dXALwg

edited Aug 18, 2016 at 6:48

answered Aug 18, 2016 at 5:02

Shahil Mohammed

3,8785 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mel Over a year ago

Thanks so much, I tried that on ul#menu, but the problem is that it's hiding my dropdown as well, breaking the functionality of the menu. I'm not sure how to apply this to my code.

Mridul Kashyap · Accepted Answer · 2016-08-18 06:49:58Z

0

check if this works for you:

/*----- 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>

I just added widths to necessary elements. and some overflow, whitespace, and text-overflow properties.

edited Aug 18, 2016 at 6:49

answered Aug 18, 2016 at 6:34

Mridul Kashyap

7001 gold badge5 silver badges12 bronze badges

4 Comments

Mel Over a year ago

I do need the widths of the ul#menu to still be max-width: 85%; and width: auto; unfortunately... maybe what I want isn't possible with only css? I am unable to use javascript.

Mridul Kashyap Over a year ago

@Mel how about this? (just updated the snipped above. run it and you'll see).

Mridul Kashyap Over a year ago

max-width:85% and width:auto doesn't actually makes sense. width:auto behaves like width:100%. so you're telling it to "make the ul#menu width 100%(equal to the container width), but don't let it go beyond 85% of the container width.". see? it's conflicting, right? also i saw that you used multiple positionings (position:absolute/fixed/relative and float) all together at the same selector. that's not how it works.

Mel Over a year ago

Woah, I totally think that's working for me!! How did you do it??? (I am looking now :) ) Edit: just saw your next message... thanks so much!!!!!!

Maniarasu V · Accepted Answer · 2016-08-18 05:09:32Z

0

Try a fixed "width" for "ul.submenu" and add "text-overflow" to "ul.submenu li a". Like this,

ul.submenu {
   width : 150px;
}

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

answered Aug 18, 2016 at 5:09

Maniarasu V

2091 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related