The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Text going off screen when enlarged
ihikebc
post Dec 1 2021, 10:26 PM
Post #1





Group: Members
Posts: 2
Joined: 1-December 21
Member No.: 28,186



Hi, all!

I am not very good with html, please help. I have a website, and when the text gets enlarged, some of it goes off the screen on the right side. To see an example, try to enlarge text on this page http://ihikebc.com/trips/2009/trip001LighthousePark.htm Yet, on some professional websites the text gets bigger and bigger, but doesn't go off the screen, such as here https://www.espn.com/nfl. Is there an html tag which can fix that? Thank you in advance!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 1 2021, 11:06 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Or if the browser window is more narrow than you had expected. Mine was.

Usually this happens because fixed widths are used. But I can't find that you do that, not any large widths anyway. It's the images that forces the page to be a certain with. So when the window is too small to accommodate the images the images will be outside the window, right? Because they can't break. Images are very fixed width.

Problem is you've put it all in a table. The large images makes the table expand. And the text won't break unless it hits the wall of the table.

Look at this in a browser. I found a really large image, but if you have a super wide screen, make sure your browser window is small enough to cut the image off!

CODE

<p>
   This is a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
   a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
   a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
   a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
   a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
   a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
   a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Lion_d%27Afrique.jpg">


<table border="5">
   <tr>
      <td>
         <p>
            This is a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
            a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
            a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
            a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
            a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
            a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
            a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion a lion
         </p>
      </td>
   </tr>
   <tr>
      <td><img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Lion_d%27Afrique.jpg"></td>
   </tr>
</table>



The top example doesn't use a table. The lion pic is too big and sticks out to the right and forces the window to have a scrollbar, but the text wraps at the right edge of the window.

The second example uses a table. The lion forces the table to expand. There's lots of room for the text inside its cell, so no reason for it to break until it hits the right border of the cell. Which is way out there to the right.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ihikebc
post Dec 1 2021, 11:31 PM
Post #3





Group: Members
Posts: 2
Joined: 1-December 21
Member No.: 28,186



Thank you, Pandy.

But would it be possible to keep the structure of the page as is, without using tables?


QUOTE(pandy @ Dec 1 2021, 11:06 PM) *

Or if the browser window is more narrow than you had expected. Mine was.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 3 2021, 10:22 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes. But you would have to learn some new ways. Not necessarily very much though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ArCs Cyber
post Jan 5 2022, 11:23 AM
Post #5


Newbie
*

Group: Members
Posts: 10
Joined: 5-January 22
Member No.: 28,216



Hello ihikebc,

There are so many solutions for this overflow problem.

You can use CSS to wrap the text

Assume that you have a long paragraph and you want to wrap its text so that it does not go off the screen you do it like this

CODE

<p style="word-wrap:break-word">very very long paragraph</p>


Hope it helps.!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:16 AM