Is it possible to truncate one specific inner span of a label, that contains multiple span elements, so that the label in total does not overflow into the next line?
I have prepared a JSFiddle for it on https://jsfiddle.net/keltik/k18892xe/3/, but for completeness I will also supply a part of the HTML/CSS here:
<html>
<body>
<div class="container">
<!-- First Spectre Accordion -->
<div class="container">
<div class="accordion">
<input id="accordion-1" name="accordion-radio" type="checkbox" hidden="">
<label class="accordion-header c-hand" for="accordion-1">
<i class="fas fa-angle-down"></i>
<span class="headline">some headline that needs to be truncated1, so that everything in the parent 'label' element remains in one line</span>
<span class="spacer"></span>
<span class="date">dont truncate me1</span>
</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item">Element 1</li>
<li class="menu-item">Element 2</li>
<li class="menu-item">Element 3</li>
</ul>
</div>
</div>
<!-- more accordions, same structure -->
</body>
</html>
The CSS file is like this, on my development machine I am using Scss though:
.container {
max-width: 400px;
}
I am using the spectre.css framework and it is already included in the aforementioned JSFiddle link.
I have already tried out these approaches, but could not get any of them working with label, multiple span elements and the specific spectre.css classes:
https://scottwhittaker.net/flexbox/2017/02/05/flexbox-and-text-truncation.html
https://westerndevs.com/css/Using-Overflow-Ellipsis-in-Inline-Flex/
How to use "text-overflow: ellipsis" with a label element?
I am looking for approaches using HTML/CSS without Javascript, if it is possible.
I would appreciate your help.
You can try the use of white-space:nowrap and flexbox like this:
label {
display: flex;
max-width: 400px;
border: 1px solid;
overflow: hidden;
}
label > span {
white-space: nowrap;
flex-shrink: 0; /*This span will never shrink*/
margin: 0 5px;
}
span.tru {
flex-shrink: 1;/*allow this one to shrink*/
/*Hide the overflow*/
overflow: hidden;
text-overflow: ellipsis;
}
<label>
<span>lorem don't truncate</span>
<span class="tru"> truncate me truncate me truncate me truncate me truncate me v truncate me truncate me truncate me</span>
<span>don't truncate me</span>
</label>
Related
I have the following list and want to add another element to list element with Name. So I am adding Primary User but want the new element Primary User styled to the right of the line. What's the best way to do this? Is it awkward doing this to a list item? Thanks.
<div class="panel-heading">Company Details</div>
<ul class="list-group">
<li class="list-group-item"><b>Name:</b> <%= #company.name %><b>Primary User:</b><%= #company.primary %></li>```
One possibility would be to use float right. Don't know if it is the best one and there are probably plenty others, but it will work.
HTML
<div class="panel-heading">Company Details</div>
<ul class="list-group">
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
</ul>
CSS
.user {
float: right;
}
.list-group {
width: 250px;
}
https://jsfiddle.net/zy7d48ub/
Wrap your code inside this div wrapper and it should work.
<div class = "panel-heading-wrapper" style = "display: flex;">
I find myself using (maybe overusing?) css grid a lot for layouts such as this. It has so much flexibility for fine-tuning the layout. My approach would be:
<div class="panel">
<div class="panel-heading">
Company
</div>
<div class="name">
Name
</div>
<div class="user">
User
</div>
</div>
.panel {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 20px 20px;
grid-template-areas: 'heading heading''name user'
}
.panel-heading {
grid-area: heading;
}
.name {
grid-area: name;
}
.user {
grid-area: user;
}
here's what it looks like on jsfiddle
I'm using span elements within section containers to build out a set of results that can be dynamically inserted by an external program.
The desired result should look something like this:
However, the result squashes all of the entries together, sticking their containers on the same line:
The title section is very simple, and consists of a section and five spans:
<section class="titleholder">
<span id="htlabelHI">Entry Name</span>
<span id="htlabelHI">Parameter</span>
<span id="htlabelHI">Param in List</span>
<span id="htlabelHI">Param in List2</span>
<span id="htlabelHI">Param in List3</span>
</section>
The css is as follows:
.titleholder {
display: flex;
justify-content: space-around;
text-align:center;
border-top:solid;
border-top-color:lightgray;
border-top-width:thin;
border-bottom:solid;
border-bottom-color:lightgray;
border-bottom-width:thin;
font-family: Verdana;
font-size: 10px;
}
The HTML for the results section is a little more complex:
<section class="results">
<div class="hazardResult">
<span class="EntryName">11</span>
<span class="Param">2</span>
<span class="ParamList1">
<ul>
<li>1</li>
</ul>
</span>
<span class="ParamList2">
<ul>
<li>1</li>
</ul>
</span>
<span class="ParamList3">
<ul>
<li>1</li>
</ul>
</span>
</div>
<div class="hazardResult">
<span class="EntryName">22</span>
<span class="Param">2</span>
<span class="ParamList1">
<ul>
<li>2</li>
</ul>
</span>
<span class="ParamList2">
<ul>
<li>2</li>
</ul>
</span>
<span class="ParamList3">
<ul>
<li>2</li>
</ul>
</span>
</div>
</section>
The CSS is not too dissimilar:
.results {
display: flex;
justify-content: space-around;
padding: 10px 0;
border-bottom:solid;
border-bottom-color:lightgray;
border-bottom-width:thin;
height: 150px;
font-size: 10px;
padding-top: 4px;
padding-left: 20px;
text-align:center;
}
I feel like I need to do something to distinguish the 'div' elements of each hazardResult, however setting the width does little more than move the elements around horizontally. The table has a maximum width of 900px.
I also tried individually setting the widths of each span, but this yielded no results.
What else can I try to even out the spacing? Bear in mind that the height of the div must adapt to the longest list.
I'm trying to implement auto-complete inside a form item, where as the user types it creates a dropdown menu with a list of suggestions, which are clickable. This is done inside the Ionic Framework.
I've made a codepen to demonstrate what I want. (look at the auto-complete field, and the grey hidden box below it)
http://codepen.io/pbernasconi/pen/Cgobi
My dropdown:
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">License #</span>
<input type="text" placeholder="AUTO COMPLETE FIELD">
<div class="input-dropdown">
<ul class="input-dropdown-menu">
<li>...</li>
</ul>
</div>
</label>
</div>
My CSS:
.input-dropdown {
position: absolute;
background: grey;
border: solid 1px #000;
z-index: 1001;
overflow: visible;
}
.input-dropdown-menu {
}
This issue is that position: absolute doesn't allow me to overlay over the list item below the auto-complete field, as you can see in the codepen.
Here's an example of a solution, which for some reason doesn't work for me.
Does anyone know how to implement this dropdown to overlay over it's parent's?
The label item overflow is hidden and the dropdown list is inside it, so you can't see it.
// jquery code
$(document).ready(function() {
$("#test").focus(function(){
$(".input-dropdown-menu").show();
});
$("#test").mouseleave(function(){
$(".input-dropdown-menu").hide();
});
});
//use css
input-dropdown {
position: absolute;
background: grey;
border: solid 1px #000;
z-index: 1001;
overflow: visible;
margin-left:65px;
}
.input-dropdown-menu {
display:none;
}
//use html
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">License #</span>
<input type="text" placeholder="AUTO COMPLETE FIELD" id ="test">
<div class="input-dropdown">
<ul class="input-dropdown-menu">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
Trying to figure out how to do this. I have the style but I'd like something to happen after I click the tabs. I would like the div with the tab class names to show and hide when i click the tabs. I'm assuming how that would work. Right now when I click the tabs nothing happens.
Here's my HTML
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: lightgray;
}
ul.tabs>li.selected {
background-color: lightgray;
}
div.content {
border: 1px solid black;
}
ul { overflow: auto; }
div.content { clear: both; }
</style>
<body>
<ul class="tabs">
<li>Description</li>
<li>Specs</li>
</ul>
<div class="pane">
<div class="tab1">
<div><h2>Hello</h2></div>
<div />
<div>Hello hello hello.</div>
<div />
<div>Goodbye goodbye, goodbye</div>
<div />
<div />
</div>
<div class="tab2" style="display:none;">
<div><h2>Hello2</h2></div>
<div />
<div>Hello2 hello2 hello2.</div>
<div />
<div>Goodbye2 goodbye2, goodbye2</div>
<div />
</div>
</div>
<div class="content">
This should really appear on a new line.
</div>
</body>
Standard answer: you can't. There is no way to do this with purely HTML/CSS2, unfortunately. We can make drop-downs in CSS with the :hover psuedo-class, but there's no equivalent for clicks. Look into one of these Javascript-based solutions.
Secret answer: CSS3 [kind of] supports this. But you have to create radio buttons [weird], and it's not supported in IE7/8. If you dare...
And if you don't mind using Javascript, here's a quick solution. Reformatted your HTML, first of all. No need to put <h2>s in <div>s, and use <br /> for breaks—that's what it's there for. Also, I changed the tab <div>s to use id's instead of classes. If you have unique identifiers for an element, use id.
<ul class="tabs">
<li>Description</li>
<li>Specs</li>
</ul>
<div class="pane">
<div id="tab1">
<h2>Hello</h2>
<p>Hello hello hello.</p>
<p>Goodbye goodbye, goodbye</p>
</div>
<div id="tab2" style="display:none;">
<h2>Hello2</h2>
<p>Hello2 hello2 hello2.</p>
<p>Goodbye2 goodbye2, goodbye2</p>
</div>
</div>
<div class="content">This should really appear on a new line.</div>
Didn't touch your CSS.
For Javascript, I recommend using jQuery. It really simplifies things.
All you need are these lines of code:
$(document).ready(function() {
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
})
Basically, once the page is ready [has loaded], look for every link that's a child of a tabs ul. Attach a function that runs each time this link is clicked. When said link is clicked, hide all the tabs in the .pane div. Then, use the link's href to find the proper tab div and show it.
fiddle: http://jsfiddle.net/uFALn/18/
Because of the floated <li> elements your <ul> element is zero height.
Try adding ul { overflow: auto; } and div.content { clear: both; } to your CSS
Thanks benesch. It helped me too.
One can also add return false to prevent that jerky jump to the anchor. For instance:
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
return false;
});
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.