How to break word into two parts and put them under each other

Asked Mar 15 '17 at 12:36

Active Mar 15 '17 at 14:41

Viewed 28 times

I want to make a menubar that looks like this:

So the words should be cut in the middle and placed under each other like this:

epi-
sodes

 ul{
list-style-type: none;
font-size: 20pt;
}


li{
display: inline;
padding: 0px 30px;
word-wrap: break-word;
}

<div id="menu"> 
  <div id="flip">Click to slide the panel down or up</div>
  <div id="panel">  
  <ul>
      <li> EPIS- ODER </li>
      <li> KARAK- TERER </li>
      <li> OM- OSS </li>
      <li> PRODU- KSJON </li>
  </ul>
  </div>
</div>

All help is appreciated!:)

edited Mar 15 '17 at 14:41

priya_singh

2,478
1
14
32

asked Mar 15 '17 at 12:36

In6ify

3

What about the
tag? It should work to break any line. – Gabriel Lovetro Mar 15 '17 at 12:39
yeah sure, but isn't that "bad" coding? wondered if there was a more elegant way:p – In6ify Mar 15 '17 at 12:49
Depends if different resolutions or other CSS would ruin the style. If nothing really ruins it and it looks fine, then by all means the simplest solution is the best one (nothing ugly about simple things, after all). – Gabriel Lovetro Mar 15 '17 at 12:53
Not really a duplicate... – sol Mar 15 '17 at 12:54
@ovokuro how is it not - OP wants to break the word and add hyphens – Pete Mar 15 '17 at 12:56
I don't even know how to use hyphens though... – In6ify Mar 15 '17 at 12:58
@In6ify have a look at the answers, there's some good options - either using css or using (soft hypen) – Pete Mar 15 '17 at 13:56

How to break word into two parts and put them under each other

0 Answers0