diff --git a/common/changes/fixwordbreak_2017-04-26-21-06.json b/common/changes/fixwordbreak_2017-04-26-21-06.json new file mode 100644 index 00000000000000..f42902c5d7d323 --- /dev/null +++ b/common/changes/fixwordbreak_2017-04-26-21-06.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Don't break intra-word in tooltips UNLESS required for overflow by using CSS overflow-wrap property. Fixes #1627.", + "type": "patch" + } + ], + "email": "trgau@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss index fcb889e6d6e9a1..bce83a75c16a5f 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss +++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss @@ -198,6 +198,7 @@ $DropDown-item-height: 36px; position: relative; border: 1px solid transparent; word-wrap: break-word; + overflow-wrap: break-word; text-align: left; @media screen and (-ms-high-contrast: active) { @@ -275,6 +276,7 @@ $DropDown-item-height: 36px; text-overflow: ellipsis; min-width: 0px; max-width: 100%; - word-break: break-all; + word-wrap: break-word; + overflow-wrap: break-word; margin: 1px; } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.scss b/packages/office-ui-fabric-react/src/components/Label/Label.scss index 3539037a034b4e..81fe55506c90df 100644 --- a/packages/office-ui-fabric-react/src/components/Label/Label.scss +++ b/packages/office-ui-fabric-react/src/components/Label/Label.scss @@ -16,7 +16,8 @@ box-sizing: border-box; display: block; padding: 5px 0; - word-break: break-all; + word-wrap: break-word; + overflow-wrap: break-word; } .isRequired { diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss index d9cfceef9a6728..a87c6ec778c020 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss +++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.scss @@ -21,5 +21,6 @@ margin: 0; font-size: $ms-font-size-s; color: $ms-color-neutralPrimary; - word-break: break-all; + word-wrap: break-word; + overflow-wrap: break-word; } \ No newline at end of file