0

I have a menu, when the window is smaller, I have text on multiple line. I search how to make the text align. But the text go under the first part instead of the beginning of my text/span. I cant use css flex because its not supported on IE9 and IE10.

<ul>
  <li class="menu13">
    <span class="number">1</span>
    <span class="dot">.&nbsp;</span>
    <span class="text">menu 1</span>
  </li>
  <li class="menu2">
    <span class="number">2</span>
    <span class="dot">.&nbsp;</span>
    <span class="text">menu 2 is so long that I need to find a way to align multiple line. So I want no padding left on the second line. But I cant use css flex because it not working on IE9. I cant use width (like menu 5).</span>
  </li>

https://jsfiddle.net/at24sxmx/

you can see the menu 3 on my fiddle, made with flex (I search an alternative)

forX
  • 2,063
  • 2
  • 26
  • 47
  • Why don't you use
      instead of
      . Then you don't need those extra spans too.
     – Mojtaba Jun 15 '16 at 20:22
  • I need the number without the dot on mobile. – forX Jun 15 '16 at 20:23
  • You can use CSS for mobile devices: http://stackoverflow.com/questions/11946098/how-to-remove-dot-after-number-in-ordered-list-items-in-ol-li – Mojtaba Jun 15 '16 at 20:24
  • I will retry with ol and make the number invisible on desktop version. tanks – forX Jun 15 '16 at 20:26
  • It needed little tweek but it worked with ol . tank you mojtaba. Just needed somebody to call a "You should rethink your thing". – forX Jun 15 '16 at 20:56

1 Answers1

0

Just remove .menu4 span selector and update your HTML:

<span class="number">4</span><span class="dot">.&nbsp;</span><span class="text">menu 4 - test with block . Not working, so Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah.</span>

Make sure you delete new lines characters from HTML, here is a result: https://jsfiddle.net/at24sxmx/5/

divix
  • 1,265
  • 13
  • 27
  • I need menu 2 like menu 3 but without css-flex. – forX Jun 15 '16 at 20:28
  • sorry but I dont see your patch on your fiddle – forX Jun 15 '16 at 20:46
  • witch one should be right? On firefox, there's still only the number 3 that show it right. (you can stop looking, I change to ol instead of ul with number) – forX Jun 15 '16 at 20:58
  • Your previous css is messing around with other items, you don't need ANY css to make it work into single line, just delete white spaces between spans inside that item. – divix Jun 15 '16 at 20:59