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


Tags: html,css

Problem :

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 http://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: http://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).



Solution :

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.


    CSS Howto..

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to handle text wrapping in CSS? [duplicate]

    How to change the css of the div that i just created in code

    css-how to set a three parallel DIV?

    How to Prevent Opacity for Sub Div using Jquery

    How to use CssStyleCollection for a UserControl?

    how to change radio buttons style in h:selectOneRadio

    How to achieve a photo “stack” border effect with CSS?

    How to switch css based table column with nested content using jquery?

    How to style the value of a placeholder like if I want to give a margin at left of that value, what to write in css?

    How to select child element inside first, second or third html element with CSS classes?

    How to fix specific div's position in CSS

    How to have div fill width and height of browser window and not have the image be streched

    How to make nav and right block fixed, also keep the whole container is in center?

    How to get span to be only as wide as the image inside of it?

    How to use HTML/CSS to show images and titles inline?

    How to align columns in bootstrap to center?

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    How do i position a div relative to the window page (responsive css)

    How to use pure CSS to control other elements under same parent?

    How to set relative url for a css file in Django

    CSS: How to get rid of the extra space of first line of a paragraph?

    How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS)

    How can I place two headings next to each other using CSS?

    How to make comment shape using css

    CSS position: absolute - understanding how to center text inside a div box

    jQuery UI sortable: how to leave css values of changed items untouched?

    How to make images always relative to a div using CSS

    How to force style formatting into child tags of

    How to add a fancy frame for an img if you only know its width?