CODEWITHSUNDEEP
htmlcss
Dr. Owning
Dr. Owning

Reputation: 173

CSS word-wrapping?

This is usually a simple thing to do I thought but for some reason I just can't get it.

So as you can see below (snippet), I have a ul with lis that are fixed to the left side of the screen as small tabs. When hovered over, they expand. I am trying to make it so that it just reveals the straight line of text instead of un-wrapping it as it expands. What do I do?

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 10px;
  background-color: gray;
  margin-left: 0;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: width .75s;
  list-style: none;
  word-wrap: none;
}
#navTabs li:hover {
  width: 250px;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}
<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1>NOT HOME</h1>
    </li>
  </ul>
</body>

Upvotes: 2

Views: 97

Answers (4)

Jakub Matczak
Jakub Matczak

Reputation: 15656

Ashkay's answer if correct. Anyway you can also manipulate margin-left instead of width. Then you will achieve nice effect of moving text with the box.

See the snippet below.

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 250px;
  background-color: gray;
  margin-left: -240px;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: margin .75s;
  list-style: none;
  word-wrap: none;
}
#navTabs li:hover {
  margin-left: 0;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}
<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1>NOT HOME</h1>
    </li>
  </ul>
</body>

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

Try using margin-left instead of width like this:

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 250px;
  background-color: gray;
  margin-left: -230px;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: all .75s;
  list-style: none;
  word-wrap: none;

}
#navTabs li:hover {
  width: 250px;
  margin-left: 0px;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}
<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1>NOT HOME</h1>
    </li>
  </ul>
</body>

Upvotes: 2

darthmaim
darthmaim

Reputation: 5148

You can add white-space: nowrap to prevent the text from wrapping to the next line.

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 10px;
  background-color: gray;
  margin-left: 0;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: width .75s;
  list-style: none;
  word-wrap: none;

  /* added this: */
  white-space: nowrap;
}
#navTabs li:hover {
  width: 250px;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}
<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1>NOT HOME</h1>
    </li>
  </ul>
</body>

Upvotes: 5

Akshay
Akshay

Reputation: 14348

You could add something like this <nobr>NOT HOME</nobr>

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 10px;
  background-color: gray;
  margin-left: 0;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: width .75s;
  list-style: none;
  word-wrap: none;
}
#navTabs li:hover {
  width: 250px;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}
<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1><nobr>NOT HOME</nobr></h1>
    </li>
  </ul>
</body>

Upvotes: 0

Related Questions