Question 45492 in CSS Question posted in
Some basic documentation can be found here.

text disappears after '&' a space, linear ingredient – CSS

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 class="background">
  <h1 class="title">NEWS & EVENTS</h1>
  <h1 class="title">NEWS # EVENTS</h1>
</div>
Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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 class="background">
  <h1 class="title">NEWS & EVENTS</h1>
  <h1 class="title">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 class="background">
  <h1 class="title">NEWS & EVENTS</h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search