User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm looking for the best way to display a date range in text that could potentially span across 2 lines. Currently I simply have something like "01-Jan-2013 -> 05-Jan-2013" with the arrow being an arrow icon.

This is fine when the start and end date are next to each other but if the text gets wrapped on to the next line this looks very messy and confusing.

What is the best way to represent start and end date ranges in a nice, quickly scannable way that wont look messy across lines?

Edit: Also the format of the text string is possible to change due to internationalisation

share|improve this question
Do you just have to show the text or also allow the user to update the date as needed ? – Mervin Johnsingh Feb 10 '13 at 15:38
Just show the text. The input is done by a different user on different page. This is simply a summary box of an event. – AverageMarcus Feb 10 '13 at 15:43
up vote 4 down vote accepted

This is the solution I have come up with so far.

Date range when displayed inline:

Date range when displayed inline

Date range when displayed across lines:

Date range when displayed across lines

If there are no better suggestions I will eventually mark this as the accepted answer

share|improve this answer
That's an excellent solution if it's not to lengthy. In general spelling things out like that is foolproof and my preferred solution. I would be careful to not make the dates look like buttons. They don't have to be inverted like that, just a subtle background shading to group it into a term and reinforce the contiguousness. – obelia Feb 10 '13 at 17:04
Compared to the rest of the page, these elements look "inset" while buttons "pop out" so I don't think there will be any confusion. (Cursor is set to pointer over a button anyway so a quick hover will relive any confusion) – AverageMarcus Feb 10 '13 at 18:19

I am not a fan of your solution. With the date box moving to the left, it lacks the consistency with every other box.

Here are the two options I've come up with. In these options, the date text aligns on the right with the other ones, so that there is no inconsistency there. I'm a fan of the first option the most.

Image link with two solutions

I personally would redesign the entire textbox to ensure that the text never wraps. The solution below may succeed in doing so.

Solution to prevent wrapping

share|improve this answer
there is no solution to prevent wrapping , one can decide the wrapping breaks words, especially with CSS. – camus Feb 14 '13 at 6:58
@Camus, there is the widely supported `<nobr>´ tag - however, the original question does not mention any technology in particular nor are implementation problems considered on-topic at UX.SE. For the sake of argument, assuming there is a way the OP could make the text not breaking, is fine - implementing it is up to them. – kontur Feb 14 '13 at 9:36
why the downvote? – Jacob Raccuia Sep 18 '14 at 20:37

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.