CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 737

How to Make DD Wrap under DT When DD Content has No Spaces

I'm working with a specification requiring that the following code:

<dl>
    <dt>Key</dt>
    <dd>012345678901234567890123456789</dd>
</dl>

...render like so:

Key  01234567890123456
7890123456789

When the contents of the DD contain spaces, it works just fine, but when there are no spaces, it fails. Even including dd { word-wrap: break-word; } doesn't quite work, and results in the following:

Key
0123456789012345678901
23456789

My current CSS looks like this:

dl {
    margin: 1em 0;
    padding: 0;
    width: 250px;
}

dt {
    float: left;
    clear: left;
    margin: 0;
    padding: 0 .5em 0 0;
    font-weight: bold;
}

dd {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

dd:after {
    content: ".";
    visibility: hidden;
    clear: left;
}

How can I achieve my intended effect using only HTML and CSS?

I have a demo up here, as well, to attempt to clarify my needs: http://cdpn.io/Ezujp (warning, contains SCSS rather than CSS, but it's not incredibly complex, so it should be easy to mentally translate).

I read, learned from, and made use of https://stackoverflow.com/a/1577397/771948, and while it got me closer to my intended solution, it did not meet all my needs.

I am not required to use a DL. If there is another way of achieving my intended effect in a cross-browser (IE7+) way, then I would be willing to use that instead, provided it is semantically correct and doesn't involve too many hacks.

I would try dt { display: run-in; } but that doesn't work in Firefox, and it still didn't result in any difference form what I have now (when dd { word-wrap: break-word } was included, the dd began on the next line, and then wrapped, just like it does now).

Edit: After doing a bit more searching around SO, I found this answer: https://stackoverflow.com/a/3284425/771948

It presented a few alternative options that are easier to style than a DL, but I'm not sure on the semantics. Nonetheless, I set up a working prototype using a ul structured in the following manner:

<ul>
    <li><strong>Key</strong>012345678901234567890123456789</li>
</ul>

...which, when styled as follows:

ul {
    outline: 1px solid #F00;
    margin: 1em 0;
    padding: 0;
    width: 250px;
}

li {
    width: 100%;
    outline: 1px solid #00F;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

strong {
    white-space: nowrap;
}

...renders as intended, but I'm not sure this is semantically correct, nor screen reader accessible. Does anyone have any useful advice for me in this scenario?

Thank you in advance. If nothing else, I hope this proves a useful resource to others in similar situations (because of links to two other SO answers for similar questions).

Upvotes: 3

Views: 6270

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201708

According to the CSS3 Text draft, you can use word-break: break-all (on the dd elements). The names are misnomers; the settings declare that any string in the content may be broken at any point. (This contrasts with word-wrap: break-word, which similarly allows “free” line breaks, but only when absolutely needed to avoid overflow, i.e. as emergency breaks.)

However, it is supported only by Firefox and by IE. For better browser coverage, you would need to insert e.g. zero-width spaces or <wbr> tags after each digit (but you could do this with client-side scripting); both options have pros and cons.

Upvotes: 7

Related Questions