Are there any alternatives for -webkit-box-orient?
I need it for the following class:
.max-2-lines{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
}
However i can see here that only few browsers support that property
Actually you are using the old implementation of line-clamp that require the use of -webkit-box and -webkit-box-orient.
In the near future you will only need to use the line-clamp property:
The line-clamp property is a shorthand for the max-lines, block-ellipsis, and continue properties.
It allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content. ref
You can also check the Legacy compatibility section for more information
Related
Escaping in LESS, either through e or ~ works pretty well in most of the cases. However, the declaration display: -webkit-box; doesn't show in the resulting CSS, even after using e or ~.
All other declarations of that class is present but display: -webkit-box;
What am I missing?
display: -moz-box / -webkit-box
Per MDN
This property is a non-standard extension. There was an old draft of the CSS3 Flexbox specification that defined a box-flex property, but that draft has since been superseded.
They also state:
Warning: This is a property for controlling parts of the XUL box model. It does not match either the old CSS Flexible Box Layout Module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts).
Basically, don't use it...it has almost no browser support (except older versions of Firefox)
I'm trying to set up a layout for my site using flexbox (inb4: I don't care about IE) but for some reason the items aren't wrapping.
http://jsfiddle.net/EnUuA/
section { display:-webkit-flex; -webkit-flex-flow: row wrap; width: 200px; /* ... */ }
div { -webkit-flex: 1; width:48%; /* ... */ }
I've tried setting a width in px and I've tried removing the width completely.. still doesn't wrap!
So, how can I get my flexboxes to wrap around in their container?
Please, before you answer, make sure that your answer actually uses the flexible box model and isn't just giving me block level elements.
It seems that (as of today) the flex-flow property is one that isn't in on Firefox (at least the CR 2012 version).
You can see the wrapping in this fiddle working in Opera/Chrome, however.
Safari Nightly also has it functioning http://nightly.webkit.org
[edit] stupid Compass forgot the prefixes
References:
https://developer.mozilla.org/en-US/docs/CSS/flex
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
NB as of FF 21.0a1 it does not support flex-wrap
At least you can validate the property works:
http://jsfiddle.net/M7yLn/1/
In GWT, one can create a custom logging area by installing a HasWidgetsLogHandler. In my case, that is a VerticalPanel. Unfortunately, the rest of the page is distorted by the logging output, which is too wide. How can I wrap the lines?
HasWidgetsLogHandler adds an HTML element for each log entry. I tried styling the individual elements in UiBinder, but that did not work:
<ui:style>
#external gwt-HTML;
.gwt-HTML {
white-space: normal;
}
</ui:style>
Similarly, adding overflow: hidden—which would have been a less attractive option—had no effect.
Thank you for any pointers.
A VerticalPanel is implemented as an HTML table. While you can use it, I would usually recommend a FlowPanel instead.
On a FlowPanel, you can set the following properties:
white-space: normal;
word-wrap: break-word;
word-wrap is CSS3, but is supported by many browsers: http://caniuse.com/wordwrap. It allows long words to be wrapped after every character. For browsers that don't support it, you may want to add overflow: hidden. (Or consider setting a fixed width together with overflow: auto.)
If you absolutely need to use a VerticalPanel, see Word-wrap in an HTML table (you have to set the word-wrap on the <td> then).
Using flex box, I'm trying to create flexible article nodes that wrap when they fill their parent container (4 or so nodes per row). Currently, they remain on one line and overflow the parent without wrapping. Any ideas?
My css:
.container {
display: -webkit-box;
height: 100%;
width: 100%;
-webkit-box-lines: multiple;
-webkit-box-orient: horizontal; }
.container article {
-webkit-box-flex: 1; }
I have been experimenting a bit with flexboxes, but as far I could find out, there is no current browser which implements the "box-lines: multiple" command.
The Apple developer documentation claims that it exists since iOS 1.0 and Safari 3.0, however the status of all the flex-box commands still reads "under development". So the command exists, and is not rejected as an error, but only the "single" value is currently working, as it seems.
IE10 will have it implemented when released. The others might be doing so in the future as well.
http://www.boogdesign.com/b2evo/index.php/ie10-future-of-css-layout?blog=2
Here is another post I found about the topic.
http://www.xanthir.com/blog/b48Z0
"The multiple line support has been marked as at-risk in the new draft, as it appears to require a more extensive treatment than is given to it in this draft."
"A pair of properties, flex-break-before and flex-break-after, can produce explicit line breaks before/after a flexbox child, or prevent linebreaks from ever occuring."
I have inserted content using the :before pseudo-element for a class. I was trying to position this content using margin-top but firefox is simply ignoring the property. The code follows:
.bef {
line-height: 2em;
white-space: nowrap;
font-size:24px;
display: block;
}
.bef:before {
display: block;
margin-top:2em;
padding: 0;
color: #666666;
content:"Hello";
}
Does anybody know why Firefox may be ignoring the margin-top property?
EDIT: Although margin-top is being totally ignored, margin-bottom:-Xem is working and I am able to move the :before element around
It appears that Darko Z is right.
http://jquery.nodnod.net/cases/577
Hypothetically, the first two test cases (separated by <hr>) should render identically, which they do in Gecko (via FF3.5/Mac), but Webkit (via Safari4/Mac) renders the :before and :after segments as inline. The third test case seems to imply that Webkit currently requires the triggering element to be block in order for the generated content to be block.
The spec isn't clear on what the correct behavior is. It may be worth raising a question on www-style to see which rendering engine's behavior is correct, then filing a bug with the incorrect rendering engine to get it fixed in future versions. Feel free to use my code as a test case.
try making .bef display block also? just a guess that the containing element of the :before needs to be block so it can listen to the margin-top...