code pen
css
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
width: 14.285714286%;
box-sizing: border-box;
}
th {
vertical-align: middle;
}
td {
height: 100px;
vertical-align: top;
padding: 4px;
}
.event-list {
list-style: none;
margin: 0;
padding: 0;
}
.event-list li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span.day {
float: right;
font-weight: bold;
}
.other-month .day {
color: #888;
}
td.other-month {
background-color: #eee;
}
body {
font-family: sans-serif;
font-size: 10pt;
}
html
<td class="day-cell current-month"><span class="day">2</span><ul class="event-list"><li>1-4 FM - Fishing</li></ul></td>
I've set the width of each of the table cells to 14.28% but the <li>s push the table cells out even though I have overflow:hidden on them. I don't want the list-items to stretch the cells; I want them to show an ellipsis if the line is to long. Is that possible?
Simply add table-layout: fixed; to table
Demo: http://jsfiddle.net/Y8Zx5/
Explanation: This will force the table cells to have the specified width of 14.285714286%; forcefully, hence preventing the table cells to grow in width with the content, and resulting in the ellipsis to occur in your desired width.
Did you try adding text-overflow: ellipsis;?
I have this working with bootstrap at THIS DEMO LINK
It uses the following CSS
.setWidth {
max-width: 80px;
}
.concat>div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: inherit;
}
For this HTML
<td class="setWidth concat"><div>Some text for table cell here</div></td>
Related
I need some help in a sizing question. If you view the following code in desktop browsers, everything is sized as it should be. If you try to open it on a mobile phone (I have tested it with several iPhones), the td (white with grey border) is not resized properly. The td element is resized correct, if there is a span element that's causing the overflow.
div.highlighter-rouge {
overflow-x: scroll;
}
div.highlight {
width: 100%;
}
.highlight {
display: inline-block;
}
.highlight {
background-color: #eeeeee;
}
pre.highlight {
margin-top: 0;
margin-bottom: 0;
}
pre code {
white-space: pre;
}
table {
margin: 15px 0;
padding: 0;
}
table {
word-wrap: anywhere;
}
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr th :last-child,
table tr td :last-child {
margin-bottom: 0;
}
table tr th :first-child,
table tr td :first-child {
margin-top: 0;
}
td.rouge-code>pre>span {
display: inline-block;
}
.highlight .nt {
color: #000080;
}
.highlight .s1 {
color: #d01040;
}
html {
-webkit-text-size-adjust: 100%;
}
<div class="language-bash highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2</pre>
</td>
<td class="rouge-code">
<pre>ausearch <span class="nt">-c</span> <span class="s1">'ajp-bio-0:0:0:0'</span> <span class="nt">--raw</span> | audit2allow <span class="nt">-M</span> my-ajpbio0000
semodule <span class="nt">-i</span> my-ajpbio0000.pp</pre>
</td>
</tr>
</tbody>
</table</code>
</pre>
</div>
</div>
I've tried many things now, but my level of knowledge about this, just leads to trial and error. If you don't really like the solution with tables, I can also create a version with the exact same behaviour without them.
https://codepen.io/ribbonCaptain/pen/GRrqgpE
.rouge-table td {
vertical-align: top;
}
.rouge-table td pre {
white-space: pre-wrap;
}
...will do it. See it here.
There's not much to explain.
How to vertical align single or multiple line ?
I need for ellipsis, because in some situations i want to show only one line, and sometimes two lines.
this is my code so far:
html, body, p {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.ellipsis {
height: 100px;
border: 5px solid #AAA;
}
.blah {
overflow: hidden;
height: 1.2em;
line-height: 1.2em;
display: block;
}
.blah:before {
content:"";
float: left;
width: 5px;
height: 3.6em;
}
.blah > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
live example: http://jsfiddle.net/0dqef9da/274/
Vertical align center you use simply text-align: center; and if you want to use ellipsis
<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>
<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>
</body>
</html>
please follow the link:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
In ellipsis you need also div width.. Please check the above code
You should use word-break:break-all in you text css style attribute
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;
}
This question already has answers here:
Text-overflow ellipsis on left side
(10 answers)
Closed 7 years ago.
Consider this html/css snippet:
.l { text-align: left; }
.r { text-align: right; }
p {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: solid 1px green;
}
<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>
It shows two fixed-width containers with some text too long to fit, with overflow set to show an ellipsis to show that some text is hidden. The first container is left justified, the second is right justified.
The result shows that the ellipsis is on the right for both examples.
However, for the second right justified one, I'd like to achieve this:
...4555666777888999
instead of
1112223334445556...
Is this possible?
You can set the direction of text from right to left using css direction property direction: rtl:
.l {
text-align: left;
direction: rtl;
}
.r {
text-align: right;
}
p {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: solid 1px green;
}
<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>
direction
Set the direction CSS property to match the direction of the text: rtl
for languages written from right-to-left (like Hebrew or Arabic) text
and ltr for other scripts. This is typically done as part of the
document (e.g., using the dir attribute in HTML) rather than through
direct use of CSS.
References
MDN direction
To get this effect you have to use a little hack. See the following example:
p {
border:1px solid #000;
width:150px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reverse-ellipsis {
text-overflow: clip;
position: relative;
background-color: white;
}
.reverse-ellipsis:before {
content: '\02026';
position: absolute;
z-index: 1;
left: -1em;
background-color: inherit;
padding-left: 1em;
margin-left: 0.5em;
}
.reverse-ellipsis span {
min-width: 100%;
position: relative;
display: inline-block;
float: right;
overflow: visible;
background-color: inherit;
text-indent: 0.5em;
}
.reverse-ellipsis span:before {
content: '';
position: absolute;
display: inline-block;
width: 1em;
height: 1em;
background-color: inherit;
z-index: 200;
left: -.5em;
}
<p class="ellipsis reverse-ellipsis">
<span>111222333444555666777888999</span>
</p>
<p class="ellipsis">111222333444555666777888999</p>
More information about this you can find here: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/
I have the following DOM structure:
JSFiddle demo
<table class="tbl">
<tr>
<th>
<td>
<div>
<span>
A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
</span>
</div>
</td>
<td>
<div>
<span>
A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
</span>
</div>
</td>
</th>
</tr>
</table>
table.tbl{
background-color: #FFF;
border: 1px solid #000;
border-collapse: separate;
border-radius: 5px;
float: left;
margin: 10px 0;
width: 100%;
}
table.tbl tr {
font-weight: 400;
text-align: left;
}
table.tbl th {
color: #FFF;
font-weight: 400;
padding: 6px;
text-align: left;
}
table.tbl td {
padding: 10px 8px;
}
table.tbl div {
max-width: 100%;
display: inline-flex;
}
table.tbl span {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
This table is located on the right hand side of my page, but if there is a large amount of text in one or both of the span tags, the table extends extends off my page.
I have to keep the table at width: 100% as it needs to fill all available space on the right hand side of my page.
Can I add a CSS ellipsis to the span tag but keep the overall width of the table at width: 100%?
It doesn't seem to be working for me at the moment, any suggestions or advice would be greatly appreciated.
you can try his one:
table.tbl{
background-color: #FFF;
border: 1px solid #000;
border-collapse: separate;
border-radius: 5px;
float: left;
margin: 10px 0;
width: 100%;
table-layout: fixed;
}
table.tbl tr {
font-weight: 400;
text-align: left;
}
table.tbl th {
color: #FFF;
font-weight: 400;
padding: 6px;
text-align: left;
}
table.tbl td {
padding: 10px 8px;
}
table.tbl div {
max-width: 100%;
display: inline-flex;
}
table.tbl span {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
DEMO HERE