OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

text overruns width of paragraph

  • Thread starter Thread starter GeorgePorge
  • Start date Start date
G

GeorgePorge

Guest
I'm having a very strange issue and one which I've never seen in more than 20 years of web development. I have text which is overrunning the width of the paragraph which contains it:

enter image description here

My client has requested the Duffy Script font from Adobe which might be the problem, since when I switch to sans serif, the issue goes away. But I'd really like to fix it if I can!

I've created a simple jsfiddle which shows the problem - you can simply resize the right-hand pane to see the problem I screen-capped in the image: https://jsfiddle.net/GeorgeMooWoof/4x50etdy/6/

Can anyone help at all please?

Thanks so much


Code:
@import url("https://use.typekit.net/twt4ckp.css");
.container {
  padding-right: 20px;
  background: yellow;
}

p {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
}

Code:
<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<p>I'm having a very strange issue and one which I've never seen in more than 20 years of web development. I have text which is overrunning the width of the paragraph which contains it:</p>
<p><a href="https://i.sstatic.net/bmB1zg7U.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/bmB1zg7U.jpg" alt="enter image description here" /></a></p>
<p>My client has requested the <a href="https://fonts.adobe.com/fonts/duffy-script" rel="nofollow noreferrer">Duffy Script font from Adobe</a> which might be the problem, since when I switch to <code>sans serif</code>, the issue goes away. But I'd really like to fix it if I can!</p>
<p>I've created a simple jsfiddle which shows the problem - you can simply resize the right-hand pane to see the problem I screen-capped in the image: <a href="https://jsfiddle.net/GeorgeMooWoof/4x50etdy/6/" rel="nofollow noreferrer">https://jsfiddle.net/GeorgeMooWoof/4x50etdy/6/</a></p>
<p>Can anyone help at all please?</p>
<p>Thanks so much</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://use.typekit.net/twt4ckp.css");
.container {
padding-right: 20px;
background: yellow;
}

p {
font-family: "duffy-script", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
background: rgba(255, 0, 0, 0.2);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div></code></pre>
</div>
</div>
</p>
Continue reading...
 

Latest posts

Top