CODEWITHSUNDEEP
cssbuttonheightword-wrap
user1293974
user1293974

Reputation: 13

button fixed in height with text in multiple rows do not show in same vertical position

button css fixed with height make the vertical position ugly as each button text are more than one row

I tried to comment the height:80px; then all buttons are aligned at top vertically, but all buttons will have different height, bring the BUTTONS GROUP look ugly, especially I need to generate over 10 pieces of button 

button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #444;
  width: 120px;
  height:80px !important;
  display:inline-block;
  padding:5px;
  margin: 5px 10px;
  background-color: #fdfdfd;
  border: 1px solid #cdcdcd;
  cursor: pointer;
  border-radius: 3px;
  word-wrap: break-word;
}

<button>Text in one row </button>
<button>Text in more than one row in this button </button>
<button>Text in more than two rows in this button which have same height </button>
<button>Text in more than three rows in this button which have same height, but more text </button>

CLICK to open an image

jsfiddle

How to have buttons fixed in height and all buttons locate vertically-top. Note: each button have different number of words, word-wrap into 1 line, 2 lines, 3 lines...

Upvotes: 0

Views: 812

Answers (1)

inputforcolor
inputforcolor

Reputation: 919

If you add vertical-align: top; to your button element this will resolve your problem

CSS

button {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: #444;
   width: 120px;
   height: 80px;
   display: inline-block;
   padding: 5px;
   margin: 5px 10px;
   background-color: #fdfdfd;
   border: 1px solid #cdcdcd;
   cursor: pointer;
   border-radius: 3px;
   word-wrap: break-word;
   vertical-align: top;
}

Run the code snippet below to see the result

button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #444;
  width: 120px;
  height: 80px;
  display: inline-block;
  padding:5px;
  margin: 5px 10px;
  background-color: #fdfdfd;
  border: 1px solid #cdcdcd;
  cursor: pointer;
  border-radius: 3px;
  word-wrap: break-word;
  vertical-align: top;
}
<button>Text in one row </button>
<button>Text in more than one row in this button </button>
<button>Text in more than two rows in this button which have same height </button>
<button>Text in more than three rows in this button which have same height, but more text </button>

Upvotes: 1

Related Questions