Use text-overflow: ellipsis for long words in sync set-up UI. ...

chrome/browser/sync/resources/choose_datatypes.html

Index: chrome/browser/sync/resources/choose_datatypes.html
===================================================================
--- chrome/browser/sync/resources/choose_datatypes.html	(revision 57631)
+++ chrome/browser/sync/resources/choose_datatypes.html	(working copy)
@@ -31,6 +31,8 @@
   display: inline-block;
 }
 #chooseDataTypesBody {
+  width: 90%;

[arv (Not doing code reviews), 2010/09/01 01:04:02]

This seems like the wrong solution. Maybe you want to use margins instead?

+  margin-left: 3ex;
 }
 #chooseDataTypesBody > div {
   margin-top: 0px;
@@ -38,12 +40,20 @@
   -webkit-column-gap: 10px;
   column-count: 2;
   column-gap: 10px;
-  width: 375px;
 }
 .sync-item-show {
   display: block;
   white-space: nowrap;
 }
+
+.sync-item-show > label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 92%;

[arv (Not doing code reviews), 2010/09/01 01:04:02]

In general percentage widths are not that useful unless you actually mean 92%
(which I doubt). When you have to use these arbitrary percentage values it is
usually better to use width: 100%/auto and margins/paddings.

+}
+
 .sync-item-hide {
   display: none;
 }
@@ -282,8 +292,9 @@
  <div id="chooseDataTypes" class="sync-choice_radio">
    <input id="chooseDataTypesRadio" type="radio" name="syncChooseDataTypes" 
           onclick="setDataTypeCheckboxesEnabled(true)">
+   <label for="chooseDataTypesRadio" i18n-content="choosedatatypes" >
+   </label>
    <div id="chooseDataTypesBody">
-   <label for="chooseDataTypesRadio" i18n-content="choosedatatypes" ></label>
    <div>
      <!-- Autofill -->
      <div class="sync-item-show" id="autofillItem">

[arv (Not doing code reviews), 2010/09/01 01:04:02]

I think there is room for simplification here.

You can skip the div and use the following markup:

<label><input ...><span i18n-content ...></span></label>

Since the label is using display inline-block you need to ensure that there is
no whitespace between the labels.

Then set the width of the label to 50% and two labels will fit nicely in the
container and the ellipsis will work as expected.