I'm trying to truncate some HTML included within a table cell. A link to what I'm trying to do is here http://jsfiddle.net/rBthS/1459/
The HTML for the table is simple...
<table>
<tr><td>
<p>Something is great</p>
<p>Something else is great</p>
<p>And finally everything is great</p></p></td>
</tr></table>
And I'd like to only display the first line of text followed by an ellipsis indicating the overflow, i.e. Something is ...
However because of the paragraphs it appears multiline without any ellipsis.
i.e.
Something is ...
Something els...
And finally e...
I need to keep all the HTML formatting i.e. the tags.
The CSS I'm using is as follows and works great for text without paragraphs
td
{
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid red;
}
All you need to do is set your paragraph tag to inline like so:
p {
display: inline;
}
If I understand correctly, that should work exactly how you explained.
Related
This is the example:
<style>
div {
background-color: skyblue;
height: 100px;
}
.posttext {
word-wrap: break-word;
-ms-hyphenate-limit-lines: 10;
text-overflow: ellipsis;
}
</style>
<div>
<p class="posttext">---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8--------</p>
</div>
When you decrease the width of your browser enough the text will continue to show under the blue colored div. I found a way to stop it using 'text-overflow: ellipsis' but it stops at the first line.
Is it possible to make it continue until it reaches the height of the div and then show three dots at the end rather than continuing under it?
Below properties are useful when you want to show ellipsis at the end of single line.
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Since you are looking for multi line ellipsis (which is not directly available in CSS), I think below link might help you :
https://codepen.io/martinwolf/pen/qlFdp
There is also one Jquery plugin available which can be used :
https://tpgblog.com/threedots/
Okay. So I have a div full of spans and every span has a word or a few inside. The div fits multiple rows and has a fixed width. I need the span contents to stay same on the same row, not to break so that one word in a span is on the first and the rest of the words on the next one.
Let me give you a small example.
HTML
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
CSS
div{
text-align:center;
width:400px;
}
span{
margin-right:10px;
}
Now the result I'm looking for is something like this:
Hamburgers Pizza and hotdogs
Milk and beer Kids menu
But what might happen is this:
Hamburgers Pizza and hotdogs Milk
and beer Kids menu
I tried setting white-space: no-wrap but that just set everthing on one row. I have a feeling that using the white-space: no-wrap the right way is the key, but I haven't got to it yet.
I hope you get the point what I'm trying to achieve and where I am now.
white-space: nowrap; will prevent any type of line wrapping. It sounds like you want to use non-breaking spaces in your titles, which will prevent the phrases from wrapping in the middle. For example:
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
Note: the is called an HTML entity. It will render just like a regular space character to the end-user, but it tells the browser to not allow words to be broken into multiple lines.
See this reference: W3CSchools white-space reference
You can apply white-space: pre to your spans using css. This will allow them to wrap on line-breaking white-space characters, but not other white-space characters.
div {
text-align: center;
width: 400px;
border: 1px solid red;
}
span {
margin-right: 10px;
white-space: pre;
}
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
I'm outputting a list of file names with total views (tally) beside them.
I'm trying to get the tally to overflow the file name.
..So with a file / tally list like:
ejs-2015-participants-list 125,000
koh-hammertown-pics 20
slaughterhouse-co-summer-run 100
..I'm trying to get the result of:
ejs-2015-participan...125,000
koh-hammertown-pics 20
slaughterhouse-co-summe...100
The HTML / CSS (html5 / css3) has a structure like:
<style>
.box {width:200px;}
.box span {float:left;}
.box div {float:right;}
</style>
<div class="box">
<span>ejs-2015-participants-list</span><div>125,000</div>
<span>koh-hammertown-pics</span><div>20</div>
<span>slaughterhouse-co-summer-run</span><div>100</div>
</div>
I'm not particular about the elements used other than 'box' is repeated so it needs to be a class. If the structure won't work or you'd rather use another selector in your example, feel free. The solution does need to validate and work in consortium compliant browsers (not worried about IE).
I've tried various inline and block level elements with various style including:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Nothings working though - any ideas?
Tables would make the left side the same length for all rows.
You can totally get the effect you're looking for using flexbox (and for broader browser support fall back to a table solution). The idea here is that the price is the full width of its text, say "$500", and the rest of the space is filled by the item name, which has the three rules text-oveflow, overflow, and white-space that you mentioned.
Codepen:
http://codepen.io/tholex/pen/wKQPEV
HTML:
<div class="item">
<div class="name">Delicious Bagels</div>
<div class="price">$500</div>
</div>
CSS:
.row {
display: flex;
}
.name {
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.price {}
So I used a table for this, since it helps with alignment of the data and is semantically correct. No need to mess with floats.
The trick is really in the CSS. Set a max width, text-overflow of ellipsis, and don't allow word break. The actual ellipsis trick doesn't need to be in a table - any block level element can handle it.
Here's the codepen: http://codepen.io/anon/pen/bVQYWJ
CSS
.table td {
text-align: right;
}
.table th {
text-align: left;
}
.table th {
display: inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
HTML
<table class="table">
<tr>
<th>ejs-2015-participants-list</th>
<td>125,000</td>
</tr>
<tr>
<th>koh-hammertown-pics</th>
<td>20</td>
</tr>
<tr>
<th>slaughterhouse-co-summer-run</th>
<td>100</td>
</tr>
</table>
The simple answer is your .box is too small to contain the div so it drops down. One solution is to make it wider but you have other problems.
Your span is an inline element while the div is block level. I don't know why you do it that way but you should probably contain those two inside their own div so one doesn't overflow into the other.
<div class="box">
<div>
<span> stuff </span><div>125,000</div>
</div>
...
Though it seems to me you should turn the div with the number into a span also. Then everything is inline.
I have a simple two-word header, from which I would like to remove or hide the last word, instead of wrapping it to the next line, when there is not enough room in the window for both words.
<h1>First Last</h1>
I know that there are no first-word selectors for css, so that's not an option. I could hide the overflow, but I want the last word to disappear all at once, not letter by letter. And of course, white-space:nowrap; comes to mind, but that doesn't remove the word.
Is there a way to do this with css? Preferably without fixed heights or widths?
http://jsfiddle.net/pnaL4/2/
There is no possibility to select a last word from a tag. The only possibility I could think of was to use a media query that loads this custom CSS when the line size is too small:
h1 {
visibility: hidden;
}
h1:before {
visibility: visible;
content: "First";
}
Of course, this would require you to specify the showed content.
Simple. Use a white-space:nowrap; CSS Property.
h1 {
white-space: nowrap;
}
This will ensure that even if the window resizes, the text will not wrap down and get hidden as the window shrinks.
Here is the WORKING DEMO to illustrate the issue.
I ususally do something like
h1 {
font-size: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 745px;
}
ellipsis outputs ... to show there is more text to come, if you don't want anything at all I would do
text-overflow: inherit;
another good tip if you are cutting of text is to add a title attribute to the h1 so that the user can see the full word on hover.
eg
<h1 title="First Last">First Last</h1>
If you let the overflowing word(s) break to the next line, you can use an overflow with a height instead of width to create that effect:
h1 {
height: 30px;
overflow: hidden;
}
Example
I would like the long code to wrap around inside the td and div. It does so in Chrome, but I can't get it to work in Firefox. In Firefox, the text just keeps going into the next td element. Could someone help me out? Other comments on my code are welcome too (e.g. "don't use so many divs" or something)
<tr class="line">
<td class="lineNumber">38</td>
<td class="code"><div class="divCode"><code> error = guess - n/guessjfdklsjf dklsjf kdlsjfkldsjfkl dsjfklds jfkldsjfkljdsa;lfkjdsakl;fjdskla;fjdksl;ajfkld;sajfkl;dsajfkl;dsa
<td class="otherClass">other stuff here</td>
</code></div></td>
</tr>
This is styled by the following CSS:
.line td{
padding-right: 10px;
padding-left: 10px;
font-family: monospace;
word-wrap: break-word;
max-width: 40ex;
}
.code {
white-space: pre;
max-width: 40ex;
}
.divCode {
max-width: 40ex;
}
code {
max-width: 40ex;
word-wrap:break-word;
}
Thanks,
--h
The declaration white-space: pre prevents wrapping, so removing it fixes this problem. But if you wish to preserve spaces in the content, use white-space: pre-wrap instead (Caveat: no support in IE 7).
Note that wrapping does not preserve indentation: if a line starts with spaces and gets wrapped, the next line starts in the first position, with no indentation. To get wrapping that preserves indentation (and possibly indents continuation lines more than the initial line), you need different markup: make each logical line an element etc.