How to make form labels (almost) never line break?

Question

I would like my form labels to be left-aligned to the input fields, which I have achieved with this HTML:

<fieldset>
    <div class="form-group row">
        <label class="col-auto col-form-label-sm">Name</label>
        <div class="col">
            <input type="text" class="form-control form-control-sm" required />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-auto col-form-label-sm">Really Really Long Name</label>
        <div class="col">
            <input type="text" class="form-control form-control-sm" required />
        </div>
    </div>
</fieldset>

I used col-auto with my labels because I wanted the labels to fit and to never be line-wrapped and for the input field to get the remainder of the horizontal space. The only issue is I didn't realize that col-auto is only calculated per that row, so I end up with label columns of varying widths!

Is there a way to make all label columns auto size to fit the widest label but to all be that same width? It's especially important that this is an automatic resizing because we support multiple languages and won't know a hard-coded width ahead of time of each possible label text.

EDIT:

Here's what it looks like when I use col-auto

The red lines mark where the individual label column widths end up when using col-auto. The green line represents how I want all the columns to be sized, I want them all to be the width of the widest label column, which in this case is the one for "Instructions URL:"

I doubt if this can be achieved using CSS alone, unless you use a table layout. Is JavaScript an option? — kiranvj, Jun 21 '18 at 04:23
Only possible with fixed width and table, if you want labels do not wrap. — mahan, Jun 21 '18 at 07:19

score 3 · Answer 1 · answered Jun 20 '18 at 20:11

3

have you tried setting a width and using .text-nowrap? I recently had a similar issue and this worked for me.

https://getbootstrap.com/docs/4.0/utilities/text/

answered Jun 20 '18 at 20:11

RancorTamer

49
8

That looks like it just forces text to overflow its parent container when it's too long. It doesn't solve the issue of the columns not being the correct width unfortunately. – Kyle V. Jun 20 '18 at 20:20
ah, I misunderstood your question. – RancorTamer Jun 20 '18 at 20:21
I cannot find any indication that bootstrap would support this, but a table with some styling might be a better fit for this. – RancorTamer Jun 20 '18 at 20:30
Do you know what table settings specifically might result in what I'm trying to do? – Kyle V. Jun 20 '18 at 20:43
There are a few good answers here https://stackoverflow.com/questions/5967564/form-inside-a-table – RancorTamer Jun 20 '18 at 20:55

How to make form labels (almost) never line break?

1 Answers1