Line Breaks in Element Value

Just wondering if it is possible to put a line break inside a value. Example, I have a dropdown of different options that have wordy values that get called into a tooltip. This tooltip changes depending on what option you have selected. Some options I feel need a line break to make it look cleaner but I have tried  <br>  ,  
 (This one turned blue like it was going to work but sadly didn't do anything) ,  \n  , and  {&nl}  but nothing is breaking up the text. Any thoughts or is this not possible? (The  •  in the code below are where I want the Line Breaks.) HTML < div class = "statuslabel" > Drained < span class = "tooltiptext" name = "attr_drainedselect" > </ span > </ div >   < select class = "draineddropdown" name = "attr_drainedselect" > < option value = "" checked > 0 </ option > < option value = "At 1st level, a Drained creature has a 2 skill step penalty on all Skill Checks" > 1 </ option > < option value = "At 2nd level, a Drained creature has its speed reduced by 1 step, to a minimum of Very Slow • At 1st level, a Drained creature has a 2 skill step penalty on all Skill Checks" > 2 </ option > < option value = "At 3rd level, a Drained creature has a 2 dice step penalty on all attack rolls, loses the bonus saving throw dice and takes an additional 1 skill step penalty on all skill checks • At 2nd level, a Drained creature has its speed reduced by 1 step, to a minimum of Very Slow • At 1st level, a Drained creature has a 2 skill step penalty on all Skill Checks" > 3 </ option > </ select > CSS .charsheet .statuslabel { font-size : 10px ; padding-left : 5px ; padding-top : 3px ; position : relative ; display : inline-block ; } .charsheet .statuslabel .tooltiptext { visibility : hidden ; width : 200px ; background-color : #181818 ; color : #d2d2d2 ; text-align : left ; border-radius : 6px ; padding : 5px 0 ; /* Position the tooltip */ position : absolute ; z-index : 1 ; top : 100% ; left : 50% ; margin-left : -60px ; padding : 5px ; } .charsheet .statuslabel:hover .tooltiptext { visibility : visible ; }

Use the \n  for newline, and then add white-space:pre-wrap;  to the css for your .tooltiptext . This will force the span element to respect the new lines in the content.

Thank you for your response, Scott. Where do I put it? I've tried placing  white-space:pre-wrap;  in both .tooltiptext areas in the CSS but when I hover over the tooltip it just says everything with \n in the middle of the text. I understand that it should force the span element but is it a problem that it is in option value="...\n..." first before it is being moved into the span?

This is what it looks like when I put in the \n and hover over the tooltip.

I would say you really don't want that text in your value. Have the displayed text show it, have the value be something you can reference ad then show that text where you need to. Remember the value is not by default seen by the user, it is for the computer. You want simple numbers and variables there. What's your use-case for this?

There's a status section that has a checkbox next to every status so players can keep track of their statuses. I wanted to also have the status itself to display what the effect the status has on their character when they hover over, for example, Blind. One status is called Drained which has 7 levels to it so I thought I could make a dropdown next to Drained that displayed numbers but depending on what level of Drained you have the tooltip would change to fit that level. However, after speaking with the co-author of this sheet, we're just going to have the tooltip display every level when hovered. But thanks for your time anyways!

Updated my original response after a little testing; You can use "actual" new lines inside the <option> element's value (I'm sure this is a hack... so YMMV) <select class="draineddropdown" name="attr_drainedselect"> <option value="" checked="">0</option> <option value="• At 1st level, a Drained creature has a 2 skill step penalty on all Skill Checks.">1</option> <option value="• At 2nd level, a Drained creature has its speed reduced by 1 step, to a minimum of Very Slow. • At 1st level, a Drained creature has a 2 skill step penalty on all Skill Checks">2</option> <option value="• At 3rd level, a Drained creature has a 2 dice step penalty on all attack rolls, loses the bonus saving throw dice and takes an additional 1 skill step penalty on all skill checks. • At 2nd level, a Drained creature has its speed reduced by 1 step, to a minimum of Very Slow. • At 1st level, a Drained creature has a 2 skill step penalty on all Skill Checks.">3</option> </select> Use white-space: preserve-breaks; on tooltiptext to get things aligned properly.