Wrapping up the text inside an `<li>` element
Question
I've created a form, where I have a side nav-bar. In that, all the <li> elements are placed such a way that two <li> s fall in one line. Now, the problem is, whenever the text of a <li> element increases, it affects the other <li> elements. This is how I've tried:
body { overflow-x: hidden; } /* Toggle Styles */ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* Sidebar Styles */ .sidebar-nav { position: absolute; top: 0; width: 120px; margin: 0; padding: 0; list-style: none; text-indent: -2em; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } .sidebar-nav_wrapper { float:left; margin-left:5px; }
<div id="sidebar-wrapper"> <div class="sidebar-nav_wrapper"> <h4 class="sidebar-brand">Select Field Type</h4> <ul class="sidebar-nav" style="margin-top: 40px;"> <li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li> <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li> <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li> <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li> <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li> <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li> <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li> </ul> </div> <div class="sidebar-nav_wrapper"> <ul class="sidebar-nav" style="margin-top: 40px; margin-left: -20px;"> <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li> <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li> <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li> <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li> <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li> <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li> <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li> <li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li> </div> </div>
What I want is, whenever the text size of a <li> increases, only few letters should be shown outside, succeeded by .. . I've provided my css and HTML. I don't know what to correct and where to correct. So, can someone help me to achieve what I want?
2 answers
solution1
1 ACCPTED 2016-11-12 13:35:26
You can use white-space: nowrap; to prevent text from wrapping to a second line, and text-overflow: ellipsis; to display ... instead of an overflowing text part
solution2
0 2016-11-12 13:10:36
You can use this code ,
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> <title>Location Retriever</title> <style> body { overflow-x: hidden; } /* Toggle Styles */ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* Sidebar Styles */ .sidebar-nav { position: absolute; top: 0; width: 120px; margin: 0; padding: 0; list-style: none; text-indent: -2em; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } .sidebar-nav_wrapper { float:left; margin-left:5px; } li{ } </style> </head> <body> <div id="sidebar-wrapper"> <div class="sidebar-nav_wrapper"> <h4 class="sidebar-brand">Select Field Type</h4> <ul class="sidebar-nav" style="margin-top: 40px;"> <li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li> <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick Listxcvxvccvxcv</a></li> <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li> <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Linesdfsdfsdfsdfsdfsdfsdf</a></li> <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Emailsdfsdf</a></li> <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Numberdfsdf</a></li> <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Numbersdfsdf</a></li> </ul> </div> <div class="sidebar-nav_wrapper"> <ul class="sidebar-nav" style="margin-top: 40px; margin-left: -20px;"> <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Datexcvxcvxcvxcv</a></li> <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li> <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li> <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li> <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li> <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li> <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li> <li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li> </ul> </div> </div> <script> var listItems=$("li a"); for(var i=0;i<listItems.length;i++){ if (listItems[i].innerText.length>12){ listItems[i].style.whiteSpace="nowrap"; var firstPart=listItems[i].innerText.substring(0,12); var secPart=listItems[i].innerText.substring(12,listItems[i].innerText.length); listItems[i].innerText=listItems[i].innerText.slice(0,12); listItems[i].innerHTML+="<span onclick='clickSpan(this)' title="+secPart+">...</span>"; var text=listItems[i].innerHTML; console.log("getting text "+text); } } function clickSpan(span){ span.innerText=span.title; } </script> </body> </html>
You will have to increase the width of the navigation bar.SO this is what i have done.
- I have introduced a span element depending on the length of the text in the list element.
- if the length is greater than 12 then the span tag is created after the anchor tag and after the first part of the string.
- The text within the anchor tag will be "...".In case we want to view the extra text you have to click the "..." part and the extra part of the text will be viewed alongside the previous text.
- You can tweak the code for the extra text to appear "onhover" or any other event.
- You can also change the word limit of the text after which the span must appear
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Text not wrapping inside div element
Wrapping Text Inside List Element JQuery
Find li element by inner text of inside span
Selecting text inside li element, not childs?
How to hide a specific text inside a <li></li> element using css?
Text word-wrapping in <li>
Text wrapping in IE 7 <li> tags
Wrapping text inside input type="text" element HTML/CSS
“a” element inside “li” element overflows the “li” element
Links inside of floated LI wrapping in Chrome
Related Tags