Elements nowrap position

Adobe XD UXP Plugin API
1

I have following layout:

<label class="row">
  <input type="checkbox" name="artboards_list" id="{{item.id}}" value="{{item.value}}" />
  <span class="checkrow" title="{{ item.value }}">{{item.value}}</span>
</label>

with following styles:

label { white-space: nowrap; display: block; }
.checkrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Host used:

{ "host":{"app":"XD","minVersion":"21.0"} }

Expected to get single line with overflow. But in fact it’s rendered as following:
image

2

Windows or Mac? or both?

3

Both windows and mac

4

nowrap seems to be working fine (see … at the end of your sentence). Try changing span to label.

5

It works for span but by some reason doesn’t work for label. Expected behavior that checkbox and span are always on the same line. If the text is short they are on the same line. But if it’s getting longer they are on separate lines.

6

Add flex-wrap: nowrap to your label styles. That’ll fix it. (We use an inline flex layout for labels at the moment to better simulate web behavior. It’s not perfect, though, hence what you’re seeing atm. Once we support vertical alignment, we’ll be able to more closely match the web.)

7

It works now! Thanks a lot!