text disappears after '&' a space, linear ingredient-CodePudding

If I put "NEWS & EVENTS", the 'EVENTS' will disappear. But if I change '&' to '#', it works fine. How can I use '&' without causing text disappearing

.title {
  width: 1438px;
  height: 142px;
  left: 94px;
  top: 201px;
  font-family: "Eurostile";
  font-style: normal;
  font-weight: 900;
  font-size: 180px;
  line-height: 78.8%;
  /* identical to box height, or 142px */
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div >
  <h1 >NEWS & EVENTS</h1>
  <h1 >NEWS # EVENTS</h1>
</div>

CodePudding user response：

You need to escape special characters in HTML. Try this instead: &#38;

CodePudding user response：

The & is wider than the #, so you can simply increase the width of your .title:

.title {
  width: 1488px;
  height: 142px;
  left: 94px;
  top: 201px;
  font-family: "Eurostile";
  font-style: normal;
  font-weight: 900;
  font-size: 180px;
  line-height: 78.8%;
  /* identical to box height, or 142px */
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div >
  <h1 >NEWS & EVENTS</h1>
  <h1 >NEWS # EVENTS</h1>
</div>

The width, height, top, left and font-style probably aren't necessary:

.title {
  font-family: "Eurostile";
  font-weight: 900;
  font-size: 11.25rem;
  line-height: 78.8%;
  /* identical to box height, or 142px */
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div >
  <h1 >NEWS & EVENTS</h1>
</div>