Text going off screen when enlarged |
Text going off screen when enlarged |
ihikebc |
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! |
pandy |
Dec 1 2021, 11:06 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
ihikebc |
Dec 1 2021, 11:31 PM
Post
#3
|
Group: Members Posts: 2 Joined: 1-December 21 Member No.: 28,186 |
|
pandy |
Dec 3 2021, 10:22 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yes. But you would have to learn some new ways. Not necessarily very much though.
|
ArCs Cyber |
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.! |
Lo-Fi Version | Time is now: 23rd April 2024 - 04:08 PM |