Show truncated text on touch - css

As we know we could truncate text with CSS and "untruncate it this way:
<style type="text/css">
.one-long-line {
max-width:400px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.one-long-line:hover {
overflow:visible;
}
</style>
I used this to cut a long H1 in mobile view, but I want the user to be able to see the full header. Because hover doesn't work on mobile I wonder if something similar could be coded where the user touches the header and of course what this code should be.
Thanks

Works with :active
.overflow-tip {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.overflow-tip:active, .overflow-tip:hover {
overflow-x: visible;
}
See demo here

Related

Bootstrap 3 add label to cell in table

I did a fiddle to add a label inside a table cell.
Here is the fiddle
I'm trying to add a green label to my first row but it's very ugly I'm very bad in design and if you resize the browser my label go out. Do you have any suggestion to make this better ?
I do that because I have to tell to the user that this row was edited in my app.
.customrow{
margin-top:-11px;
margin-left:-43px;
padding-top:13px;
padding-bottom:20px;
margin-right: 5px;
position: absolute;
}
th {
white-space: nowrap;
}
td {
white-space: nowrap;
}
Thanks a lot.
Based on your requirement, i just made a class leftrow for the span and applied custom css
.leftrow{
position:absolute;
top:0;
left:0;
bottom:0;
width:30%;
line-height: 200%;
height:100%;
background-color:#5CB85C;
}
Jsfiddle
Hope it helps :)
You could use boostrap badge class or simply highlight the cell
I have demonstrated my two suggestions in this JsFiddle

CSS text-overflow equivalent that trims at word boundaries? [duplicate]

In my webpage I have a div with fixed width and using the following css:
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
The ellipsis is working, the problem is that it cuts the final word, and I wanted it to put the ellipsis (...) in the final of a full word.
For instance, if I have the text: "stackoverflow is the best", and if it need to be cutted near the end, I want it to display "stackoverflow is the ..." instead of "stackoverflow is the be..."
I’m afraid it’s impossible. There was once text-overflow: ellipsis-word, which would do just this, but it was not implemented in browsers and it was removed from CSS3 drafts.
Of course it's possible. (If you're willing to change your markup a bit.)
https://jsfiddle.net/warphLcr/
<style>
.foo {
/* Make it easy to see where the cutoff point is */
border: 2px solid #999;
padding-right: 18px; /* Always have room for an ellipsis */
width: 120px;
height: 1.1em; /* Only allow one line of text */
overflow: hidden; /* Hide all the text below that line */
background-color: #fff; /* Background color is required */
}
.foo > span {
display: inline-block; /* These have to be inline block to wrap correctly */
position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */
background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */
white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */
}
.foo > span:after {
position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */
content: "…"; /* Each span has an ellipsis */
}
.foo > span:last-child:after {
content: ""; /* Except for the last one */
}
</style>
<div class="foo">
<!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible -->
<span>stackoverflow</span><span> is</span><span> the</span><span> best</span>
</div>
There's a jQuery plugin that does this, called dotdotdot.
It also works for multi-line text, and adapts responsively if the text reflows e.g. if the screen size changes. It also includes smart truncation of pathnames e.g. http://example.com/some/long/.../path.html
Be aware of the possibility of width-based timing issues in cases where the width changes or becomes unavailable in ways the plugin might not expect, such as if the text is initially hidden or if it changes font (e.g. loading web fonts on some browsers). Might require re-applying or being applied after such changes.
But 99% of the time, the plugin seems fast and robust.
If you want to display one line of text that would end in ellipsis, like a news ticker for example, just do:
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Wrap long post title in new line

I have some of my post titles quite long and when viewed on my mobile phone, the long title text gets cut at the end of the screen width like it disappears in.
What I want to do is for long title text to continue on a new line rather than a section of it disappearing.
I have tried the following but not working:
.vtitle {
word-wrap: break-word;
word-break:break-all;
white-space: nowrap;
}
CSS:
.vtitle {
font: Normal 34px 'Tulpen One', Dosis, sans-serif !important;
padding-top: 12px;
word-break: normal !important;
}
I fixed the issue myself and thanks to those that responded. The fix to this was simply using the white space like this:
.vtitle {
white-space: normal !important;
}
Adding the !important forced the custom css to override the default one.
Try this:
.vtitle {
word-break:break-word;
}
Fiddle here.
Well, wanted to try it on a fiddle, but it seems like it works :
http://jsfiddle.net/n7UTK/3/
HTML:
<div class="title">
<h1>A long title in a tiny place.</h1>
</div>
CSS:
.title
{
width : 100px;
}
And it also works on my mobile phone ...

Display - Text side image with div inside on <li>

I have the following situation (I express with images):
1st situation: In the image below has a small text, and already meet the first problem. The edge of my list is not obeying the picture too: (. Wish she always fell short of my message, regardless of message size.
2nd situation: When we have a very long text, it does not obey he ends up falling (not getting to the side of the image)
The result I expect is the following:
Must be some alignment in my css as'm no expert on the subject just know my way around with some things. Someone manages to come help me? Follow my file jsFiddle. Already very grateful for the time invested it :) HERE JSFIDDLE DEMO
li {
border-bottom:1px solid gray;
text-align: left;
display:block;
}
.chat-window-user-img > img {
height:50px;
width:50px;
float:left;
padding:5px;
}
.chat-window-user-message{
direction: ltr;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
border-collapse: collapse;
border-spacing: 0;
}
Both problems can be solved with overflow: auto, a useful trick I only recently picked up:
Add to .chat-window-user-message:
display: block;
overflow: auto;
(A <div> would also have worked, instead of display: block)
And to li:
overflow: auto;
Example: http://jsfiddle.net/L6Pwq/14/
See also: CSS: Clearing Floats with Overflow

Why is 'overflow:auto' CSS not working when using some browsers

I went to Settings > Edit Theme > Advanced and added this to it, under <style type="text/css">, but it doesn't work:
pre { overflow: auto; }
code { background-color: LightGrey; padding: 1px 3px; }
The first statement doesn't take effect when accessed with Chromium (I expect a horizontal scroll to appear). The second one, which I added for demonstration purposes, works well.
Here's the page you can look at to see how well it doesn't work.
I've tested with these browsers:
Chromium and Epiphany works not
Firefox and Konqueror works
update:
Following a suggestion, I've tried all these whitespace properties inside the <pre> tag: normal, nowrap, pre, pre-line, and pre-wrap. The problem remains.
If you float .code left then it will work:
.code {float: left;}
pre { white-space: pre;}
To have a horizontal scroll bar show up, you need to add:
pre { white-space: nowrap; }
On the actual page you have the css:
pre { overflow: auto; white-space: pre-line; }
This is overwriting any other white-space declaration and therefore it will not have horizontal scroll. Changing this to white-space: nowrap fixes the problem.

Resources