search

academicpages / academicpages.github.io

Github Pages template for academic personal websites, forked from mmistakes/minimal-mistakes
https://academicpages.github.io
MIT License
12.29k stars 43.56k forks source link

URL cannot be automatically changed to a new line when toc is enabled #2357

Closed mendax1234 closed 2 months ago

mendax1234 commented 2 months ago

Describe the bug A clear and concise description of what the bug is. when the TOC is enabled, the main content of the website should be only the center part. But if there is a long URL in the center part, seems that it will overlap with the toc menu. The effect looks like below: image The URL to my website is https://mendax1234.github.io/Java8-Installation/

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Just go to my website: https://mendax1234.github.io/Java8-Installation/

Expected behavior A clear and concise description of what you expected to happen.

Expect the long URL not blocked by the toc menu.

Screenshots If applicable, add screenshots to help explain your problem.

Pasted already above.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

rjzupkoii commented 2 months ago

This really isn't a bug with the template so much as a styling issue with the site - forcing long URLs to wrap is likely how you want to go about addressing this.

mendax1234 commented 2 months ago

This really isn't a bug with the template so much as a styling issue with the site - forcing long URLs to wrap is likely how you want to go about addressing this.

Thanks, but how can I force long URLs to wrap? Seems that I only want the pure URL to be wrapped, but the URL in the markdown style with the text don't need to be wrapped. How can I achieve that? Thanks!

rjzupkoii commented 2 months ago

@mendax1234 CSS3 has support for word-warp, so you would need to write something like the following:

<a href='http://example.org' style='word-wrap: break-word;'>http://example.org</a>
mendax1234 commented 2 months ago

@mendax1234 CSS3 has support for word-warp, so you would need to write something like the following:

<a href='http://example.org' style='word-wrap: break-word;'>http://example.org</a>

Thanks! That works!