Skip to content

O
origin-web-common
Commit cf73dd5f by Robb Hamilton
Options

Clarifying flex use case for word-break-all

parent bb3f5eab
Showing with 10 additions and 2 deletions
dist/less/_mixins.less
...@@ -20,11 +20,15 @@ ...@@ -20,11 +20,15 @@
// DESCRIPTION: Breaks long non-breaking strings under the following circumstances: // DESCRIPTION: Breaks long non-breaking strings under the following circumstances:
// - if within a table not set to table-layout: fixed (but have a very good reason for doing so! otherwise, see .table-layout-fixed) // - if within a table not set to table-layout: fixed (but have a very good reason for doing so! otherwise, see .table-layout-fixed)
// - fieldset // - fieldset
// - flex container // - flex container where a flexed child CANNOT use .word-break() and flex: 1 1 0% (note that exact combo is required on the child)
// EXAMPLE: // EXAMPLE:
// <div style="display:flex"> // <div style="display:flex">
// <div class="word-break-all">... // <div class="word-break-all">...
// </div> // </div>
// INSTEAD OF:
// <div style="display:flex">
// <div class="word-break" style="flex: 1 1 0%">...
// </div>
// Guarantees the string will wrap. word-break: break-all; is used by firefox and IE to break in the usage cases. // Guarantees the string will wrap. word-break: break-all; is used by firefox and IE to break in the usage cases.
// https://bugzilla.mozilla.org/show_bug.cgi?id=587438, https://bugzilla.mozilla.org/show_bug.cgi?id=1136818 // https://bugzilla.mozilla.org/show_bug.cgi?id=587438, https://bugzilla.mozilla.org/show_bug.cgi?id=1136818
// USAGE: // USAGE:
......
src/styles/_mixins.less
...@@ -20,11 +20,15 @@ ...@@ -20,11 +20,15 @@
// DESCRIPTION: Breaks long non-breaking strings under the following circumstances: // DESCRIPTION: Breaks long non-breaking strings under the following circumstances:
// - if within a table not set to table-layout: fixed (but have a very good reason for doing so! otherwise, see .table-layout-fixed) // - if within a table not set to table-layout: fixed (but have a very good reason for doing so! otherwise, see .table-layout-fixed)
// - fieldset // - fieldset
// - flex container // - flex container where a flexed child CANNOT use .word-break() and flex: 1 1 0% (note that exact combo is required on the child)
// EXAMPLE: // EXAMPLE:
// <div style="display:flex"> // <div style="display:flex">
// <div class="word-break-all">... // <div class="word-break-all">...
// </div> // </div>
// INSTEAD OF:
// <div style="display:flex">
// <div class="word-break" style="flex: 1 1 0%">...
// </div>
// Guarantees the string will wrap. word-break: break-all; is used by firefox and IE to break in the usage cases. // Guarantees the string will wrap. word-break: break-all; is used by firefox and IE to break in the usage cases.
// https://bugzilla.mozilla.org/show_bug.cgi?id=587438, https://bugzilla.mozilla.org/show_bug.cgi?id=1136818 // https://bugzilla.mozilla.org/show_bug.cgi?id=587438, https://bugzilla.mozilla.org/show_bug.cgi?id=1136818
// USAGE: // USAGE:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment