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
Related
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
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; }
I've inherited this site and some of the css is messy.
Specifically, this new page
http://www.businesseventssydney.com.au/
has a blue horizantal menu bar. At first, some of the menu items had text that was very long and did not wrap in the menu. However, after some work and additional css, I managed to get the text to wrap, e.g. hover over "Why Sydney" then "Sydney Growing for the Future".
css as follows:
.second-level{
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
/*word-wrap: break-word;*/ /* Internet Explorer 5.5+ */
/*word-break: break-all;*/
white-space: normal;
-ms-word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
The menu text wraps great in FF and Chrome, i.e. words are not split up and entire words wrap to the next line. But, in IE, words are split before wrapping.
The weird thing is, there is the same version of this menu on another page, which works perfectly in all browsers and didn't need to do anything with it. See the following page:
http://www.businesseventssydney.com.au/about-us/
Can anyone help me resolve this?
Instead of adding a whole bunch of CSS, maybe you can just remove:
#topnav {
white-space: nowrap;
}
I am trying to create tabs that resize a bit similar to how Chrome tabs does. But I am not sure how and if it is even possible to do without JavaScript.
I don't care about browser support, I only want to see if it can be done with pure html and css/css3.
Here is the spec:
The tabs are never wider than the text inside them
When the right most tab reaches the right side of the window on resize, the tabs should start shrinking (ideal is that this happens to the widest tab first)
the active tab should never shrink
As the tabs shrink, the text should be hidden by ellipsis
the tabs will stop at a min-width that I set (so they can't go to zero width).
Can this be made with something like display: box; and box-flex: 1; properties perhaps? I haven't managed to make it yet. I have already made it with JavaScript. But the performance is not as good as I want it to (this is a BIG wep app).
So, any CSS-Gods out there up for it? If there is a way to do it with very limited use of JavaScript, I am also interested.
Thanks all!
You can get pretty close to Chrome's actual behavior with the flexbox...
body {
font: 12px/130% 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
ul {
background-color: #eee;
display: -webkit-box;
padding: 10px 10px 0 10px;
}
ul li {
-webkit-box-flex: 1;
background: #ddd;
padding: 10px 15px 6px 15px;
white-space: nowrap;
overflow: hidden;
max-width: 150px;
min-width: 50px;
border: solid #ccc 1px;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-overflow: ellipsis;
}
http://jsfiddle.net/a656n/
However, your specs are impossible in CSS only. I'd also suggest that keeping the active tab 'unshrunk' breaks conventions because your tabs will change position every time you click on them.
I improved on Duopixels anwer by using one extra <span> element and display: table-cell instead of the flexbox implementation. This way you achieve better cross-browser support/fallback. http://jsfiddle.net/w34nm/ (Tested in IE8+, Firefox 10, Chrome 17)
PS: you should probably use JavaScript to set the right width values on the list items
Well, first of all, your desired functionality is not how tabs in Chrome work, they simply remain a fixed size until there is not enough room, and then they shrink uniformly to fit. (According to MDN, You could accomplish this:
To make XUL elements in a containing box the same size, set the
containing box's equalsize attribute to the value always. This
attribute does not have a corresponding CSS property.
)
Also, a visual representation of what you are looking for would be very helpful, I found some of the demands rather confusing.
Nonetheless, I've scrapped together this. Let me know if it is at all close.
ul{
display: -webkit-box;
width:500px;
background:lightgray; text-align:left;}
li{background: gray; text-align:center; height:24px; -webkit-box-flex: 1; min-width:30px; max-width:100px; overflow:hidden; text-overflow: ellipsis; }
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.