1

I want to linebreak a WordPress site title over two lines at a specific point in the text.

Due to the WordPress content filter 'wpautop', the <br> tag (aka <br/> or <br />) is disabled seemingly site-wide. I understand the motive behind disabling the tag, but I'd like to know what is deemed the 'correct' way of line breaking with CSS in lieu of the traditional tag.

To clarify, I want to achieve this without the <br> tag:

<a href="https://example.com/">This is a<br>Site Title</a>

EDIT: Ideally I would achieve this functionality without having to hard-code the site title with markup so users are still able to amend the title in the admin setting. Is there a way to wrap after nth word or nth char with CSS for example?

Jefferson
  • 89
  • 1
  • 8
  • 1
    You could do something like this `This is aSite Title`. Or you can use one of these ideas https://stackoverflow.com/questions/2703601/how-to-line-break-from-css-without-using-br – DVN-Anakin Jun 20 '20 at 00:04
  • As it turns out, I can't get any markup to play ball with the title without hard coding the title in the theme, something I'm reluctant to do as I'd like to leave it user-friendly. I should have been clearer in my question; I'll add an edit. Thanks for the reference, it's given me ideas. – Jefferson Jun 20 '20 at 10:07
  • also u could use CSS to set `display: inline-block` and fixed `width` to your `.title` element to make it wrap at certain width – DVN-Anakin Jun 20 '20 at 10:35
  • This is the solution I've settled on for now. I've set fixed rem width and font sizes at each of my media query breaks and it works well. I initially wanted to be able to style words individually to form a responsive SEO friendly logo with default admin control intact but I've come to accept this is asking too much of WordPress without 'disconnecting' admin title settings. Title-wide styling and 'natural' wrapping is the compromise. Thanks for your input, it nudged me back toward the path of progress over procrastination! – Jefferson Jun 20 '20 at 15:02

1 Answers1

0

So the answer is, at this point in time there's no simple way to allow the use of a line break in a WP title. I ended up writing my own theme which was something I was trying to avoid, hence the question.

A little context: Many site logo's have text 'baked in' to the image and then handle the SEO side of things with metadata/attributes. I wanted to allow users to add their own title via a frontend input such as WPs 'customise theme' editor for it then to become part of the logo and an SEO-friendly h1.

My solution for a logo with real text is below. I scrapped the idea of basic user input but this did end up producing a really nice, fully responsive SEO-friendly logo.

a {
  text-decoration: none;
  font-size: 1.8rem;
}

img {
  text-align: center;
  padding: 15%
}

#divHeaderLogo {
  display: flex;
  min-width: 24rem;
}

#divLogoImage {
  border-style: dotted;
  width: 8rem;
  height: 8rem;
}

#divLogoText {
  min-width: 16rem;
}

#logoTextLine2 {
  font-size: 2.5rem;
}
<div id="divHeaderLogo">
  <div id="divLogoImage">
    <img src="" alt="Image Placeholder">
  </div>
  <div id="divLogoText">
    <h1>
      <a href="#">Here's a Wrapping <div id="logoTextLine2">Logo Title</div></a>
    </h1>
  </div>
</div>
Jefferson
  • 89
  • 1
  • 8