CSS grid line break in h3 tag

CSS grid line break in h3 tag
0
#1

https://codepen.io/jebbss/pen/ZvvoNe

In the codepen the words ‘Image search’ appear in one line, which is good. When I serve it via node/express on my local machine, ‘Image’ & ‘search’ appear on two different lines. Does anybody have any ideas on why this is?

html

<div class="center">
<div class="searchForm">
<h3>Image search</h3>
  <form action="/search" method="post">
    <textarea class="searchField" id="search" name="query" placeholder="What type of images are you looking for?"></textarea>
    <input class="searchButton" type="submit" value="Search" />
  </form>
</div>
</div>

CSS

.center {
  text-align: center;
}

.searchForm {
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: repeat(2,auto);
  justify-items: center;
  width:100px;
  margin: auto;
}
#2

Your .searchForm has a width of only 100px. Maybe try increasing that, or removing it?
Wrap your button with a div so it appears below the input form, instead of relying on the width to force it wordwrap/go below.

#3

Thanks for the input! If I increase the width of .searchForm to 200px the contents move a little to left and the h3 tag still breaks at the space. If I get rid of the width entirely, the contents move entirely to left where they’re half off the page.

Putting a div around input was a great suggestion!

#5

hmm to be honest looks more of a word / whitespace problem .

Check the following CSS properties for that H3:

  • white-space
  • word-break
  • overflow-wrap

Particularly white-space: no-wrap is usually what you need for that.