button text-overflow problem with ie

answered 2018-10-19 15:07:25 +0800

cor3000
6280 ● 2 ● 7

I didn't find any way to do this exactly in IE, it seems it doesn't support multiline ellipsis. So instead of using orient="vertical" (which produces multiline text content inside the button), you can use a normal button and just style it differently.

<vlayout>
  <style>
    .ellipsis {
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    .z-button.vertical {
      position: relative;
      padding-top: 40px;
    }
    .z-button.vertical > img {
      position: absolute;
      top: 8px;
      left: 50%;
      margin-left: -16px;
    }
  </style>
    <button label="Left left left left left left left" sclass="ellipsis"
        image="/images/user_gray-32x32.png" width="125px"/>
    <button label="Left left left left left left left"
        image="/images/user_gray-32x32.png" width="125px" sclass="ellipsis vertical"/>
</vlayout>

http://zkfiddle.org/sample/fua5p9/1-button-ellipsis

It's not perfect but very simple without having to change the button markup.

However it is also possible to change the markup by specifying a custom button mold that allows the styling necessary for your requirements.