I have read all the answers to related questions about text-overflow: ellipsis and regardless of how I have applied what are to be considered the necessary properties, I cannot get it to work without removing it from within the li tags, but it needs to be within the li tags. Any help would be appreciated!
I have tried placing the necessary properties within every element shown, the only place that white-space: nowrap and overflow: hidden have an effect are when they are placed where they are shown here, yet text-overflow: ellipsis has no effect. I have also tried the li element with display: block, but to no avail.
li {
margin-top: 19px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
display: inline-block;
height: 45px;
width: 45px;
border-radius: 50%;
box-shadow: 0px 1px 5px black;
}
.b {
display: inline-block;
vertical-align: super;
}
.b p {
margin: 5px 5px 5px 15px;
}
.top-text {
font-size: 16px;
color: #65aef8;
}
.bottom-text {
font-size: 16px;
color: #fff;
}
<ul>
<li>
<section class="a">
<img src="img.png" alt="Image">
<section class="b">
<p class="top-text">Text</p>
<p class="bottom-text>More Text</p>
</section>
</section>
</li>
...
</ul>
Changed the CSS on class 'b', element 'p' to this and text-overflow ellipsis worked:
.b p {
margin: 5px 5px 5px 15px;
width: 195px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Related
I have made a tab wrapper with 2 tabs. Under the tabs I have a div with content.
This is my code:
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: table-cell;
}
.content {
background-color: aqua;
}
.role-tab {
cursor: pointer;
display: inline-block;
height: 50px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
margin-right: 19px;
}
.role-tab>p {
display: table-cell;
height: 50px;
overflow: visible;
vertical-align: middle;
width: 100%;
}
.role-tab-active {
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
<div class="tab-wrapper">
<div class="role-tab role-tab-active">
<p>Role tab 1</p>
</div>
<div class="role-tab">
<p>Role tab 2</p>
</div>
</div>
<div class="content">
<p>Content</p>
</div>
The styling and everything are working good. Now I want to add some padding-top so the border-bottom will go under the div. This is a screenshot what I want:
I want that the border-bottom goes under the div instead of in the div.
I have tried margin-top, padding-top and top, but it didn't work
How can I achieve when the tab is active that the border-bottom goes under the div instead inside it?
just set the margin-bttom: -3px; for the active class and its done :
.role-tab-active {
margin-bottom:-3px;
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
see below snippet :
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: table-cell;
}
.content{
background-color: aqua;
}
.role-tab {
cursor: pointer;
display: inline-block;
height: 50px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
margin-right: 19px;
margin-bottom:-3px;
}
.role-tab > p {
display: table-cell;
height: 50px;
overflow: visible;
vertical-align: middle;
width: 100%;
}
.role-tab-active {
margin-bottom:-3px;
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
<div class="tab-wrapper">
<div class="role-tab role-tab-active">
<p>Role tab 1</p>
</div>
<div class="role-tab">
<p>Role tab 2</p>
</div>
</div>
<div class="content">
<p>Content</p>
</div>
You can't move borders via padding and margin. It's not an element but part of the element.
Give the .tab-wrapper a static height instead of default auto. Whatever the size of your border, the containing div will adjust to it instead, so we give it a static height to allow overflow. And then make it display:flex.
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: flex;
height: 50px;
}
You can see that both the parent and tab items are of 50px height, but that's not really the case when rendered. box-sizing: content-box being the default css property, your official active role tab height is 53px, thus, overflowing the div by 3px and giving the border an "under the div" effect
Fiddle: https://jsfiddle.net/c5u3wzv2/5/
I have 1 parent li element with 2 child spans in it.
My first span has large title so i applied ellipsis to the parent li.
My issue is when the 1st span is ellipsis, The 2nd span which should aligned next to it is being place after the full width of 1st span.
To be more clear, 1st span is title and 2nd span is count.
#title {
color: black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
}
#view-count {
font-size: 10px;
margin-left: 4px;
border-radius: 10px;
line-height: 1;
position: absolute;
top: 30%;
}
<li id="title" title="Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
<span>Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<span id="view-count">370</span>
</li>
Below is the JSFiddle for it.
JSFiddle
Any help?
You have to apply ellipsis to first span and have to remove position from second span.
Check snippet.
#title {
color: black;
position: relative;
width: 240px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
}
span {
display: inline-block;
}
#view-count {
font-size: 10px;
margin-left: 4px;
border-radius: 10px;
line-height: 1;
position: absolute;
z-index: 1;
background: #ff0000;
top: -5px;
right: 0;
}
<li id="title" title="Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
<span class="ellipsis">Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<span id="view-count">370</span>
</li>
You can use flex for this:
.title {
display: flex;
width: 200px;
}
.title > span:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
background-color: #FC0;
}
.title > span:nth-child(2) {
flex: 0 0 auto;
background-color: #CF0;
}
<ul>
<li class="title">
<span>Documentation documentation documentation documentation documentation documentation</span>
<span>370</span>
</li>
<li class="title">
<span>Documentation</span>
<span>370</span>
</li>
</ul>
Please check this example JsBin, here we have simple layout we have a child which have too long text and we need to make it no-wrap ellipsis to avoid breaking of layout but parent seems to occupy the width more then (probably equal to the text) the actual displayed text.
Below is the code
HTML
<div class="title-logo-container" >
<span class="logo">
<a href="/" >
<img src="" alt="LOGO IMAGE">
</a>
</span>
<p class="page-title" s>
test test test test test test test test test test test test test test test
</p>
CSS
.title-logo-container {
border: solid 1px #f00;
display:inline-block;
float:left;
}
.logo {
margin: 1.375em 1.5625em 15px;
padding: 0;
position: relative;
width: 5.625em;
z-index: 103;
display: inline-block;
}
.page-title {
max-width:40%;
display: inline-block;
margin: 0;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Please suggest.
Expected Output
You're specifying a percentage max-width for an inline-block that is a child of a float that doesn't have an explicit width. This results in undefined behavior because there is a circular dependency between the parent (float) width and the child (inline-block) width.
The apparent browser behavior is that the float is shrink-wrapped to the size of its contents — just enough to contain the content in one line — first, so that it has a size on which the inline-block can then base its 40% max-width. The inline-block then clips its content via overflow: hidden. The size of the float is not computed again.
As BoltClock said, I dont think here inline-block works for this situation, you can try table like this:
Demo
.title-logo-container {
clear: both;
border: solid 1px #f00;
background: green;
display: table-cell;
}
.logo {
margin: 1.375em 1.5625em 15px;
padding: 0;
position: relative;
width: 5.625em;
z-index: 103;
display: table-cell;
background: #ff0;
}
.page-title {
max-width: 40%;
display: table-cell;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #ccc;
}
Hope this helps you !
Check out below solution:
Demo
CSS:
.title-logo-container {
border: solid 1px #f00;
display:inline-block;
float:left;
width:100%;
}
.logo {
margin: 1.375em 1.5625em 15px;
padding: 0;
position: relative;
width: 100px;
z-index: 103;
display: inline-block;
}
.page-title {
width: calc(100% - 160px);
display: inline-block;
margin: 0;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
I want to apply border radius with flexbox and ellipsis on my list items and also want a min-width like the example below.
<ul>
<li style="flex: 1 1;"><span>A</span></li>
<li style="flex: 2 2;"><span>this is a pretty long text that will overflow the parent container</span></li>
<li style="flex: 1 1;"><span>C</span></li>
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: white;
}
span {
background-color: blue;
padding: 0em 1em;
border-radius: 1em;
}
Here's the example
http://jsfiddle.net/mnk/kah0bn6o/1/
The goal is to apply the border radius on the element with the ellipsis applied
One way to make it work would be to remove the <span> tags. Put everything into the <li>s.
Try this:
HTML (removed span tags)
<ul>
<li style="flex: 1 1;">A</li>
<li style="flex: 2 2;">this is a pretty long text that will overflow the parent
container</li>
<li style="flex: 1 1;">C</li>
</ul>
CSS
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 0em 1em;
background-color: blue;
border-radius: 2em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: white;
}
DEMO: http://jsfiddle.net/kah0bn6o/5/
Alternatively, you could keep the spans and simply apply the border-radius rule to both span and li elements.
DEMO: http://jsfiddle.net/kah0bn6o/7/
If you can live without the span then you can just move all the styles on to li instead.
http://jsfiddle.net/f6Lgbtre/
li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: white;
background-color: blue;
padding: 0em 1em;
border-radius: 1em;
}
and
<li style="flex: 1 1;">A</li>
I am attempting to display 2 divs on the same line using css while keeping a horizontal scroll on the last div. So far I have not been able to make this work. I have a jsfiddle, http://jsfiddle.net/fortesl/h54t1t63/3/ , and code shown below:
HTML:
<div class="title-menu">
<div class="title">
A long unbreakable name
</div>
</div>
<div class="toolbar-scroll">
<ul>
<l1>item1</l1>
<l1>item2</l1>
<l1>item3</l1>
<l1>item4</l1>
<l1>item5</l1>
<l1>item6</l1>
<l1>item7</l1>
<l1>item8</l1>
<l1>item9</l1>
<l1>item10</l1>
<l1>item11</l1>
<l1>item12</l1>
<l1>item13</l1>
<l1>item14</l1>
<l1>item15</l1>
</ul>
</div>
CSS:
ul {;
list-style-type: none;
}
li {
display: inline;
}
.title-menu {
display: inline-block;
z-index: 1004;
max-width: 540px;
max-heigth: 40px;
}
.title {
display: inline-block;
font-size: 21pt;
text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
letter-spacing: 2px;
height: 47px;
overflow: hidden;
white-space: nowrap;
}
.toolbar-scroll {
overflow: scroll;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
I am able to display the divs on the same line by setting 'display: inline-block' on the last div, but doing so disables the scroll bar. I need the scroll bar to work.
Thank you.
Consider the display: table-cell;, it is really pretty handy.
http://jsfiddle.net/h54t1t63/4/
body {
margin-top: 100px;
}
ul {;
list-style-type: none;
}
li {
display: inline;
}
.container { display:table; }
.title-menu {
display:table-cell;
z-index: 1004;
max-width: 540px;
max-heigth: 40px;
}
.title {
display:table-cell;
font-size: 21pt;
text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
letter-spacing: 2px;
height: 47px;
overflow: hidden;
white-space: nowrap;
}
.toolbar-scroll {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
height: 3em;
text-align: bottom;
width: 100px;
}
<div class='container'>
<div class="title-menu">
<div class="title">
A long unbreakable name
</div>
</div>
<div class="toolbar-scroll">
<ul>
<l1>item1</l1>
<l1>item2</l1>
<l1>item3</l1>
<l1>item4</l1>
<l1>item5</l1>
<l1>item6</l1>
<l1>item7</l1>
<l1>item8</l1>
<l1>item9</l1>
<l1>item10</l1>
<l1>item11</l1>
<l1>item12</l1>
<l1>item13</l1>
<l1>item14</l1>
<l1>item15</l1>
</ul>
</div></div>
The easiest way is to wrap them into a wrapper div and make it display:table-row while the two divs you want in a single line will have display:table-cell
http://jsfiddle.net/1z5xtd8x/