Weblinks are not responsive, they increased the mobile page width and create bad user experience.

I am using Asona theme.

Fix this problem, the weblinks doesn't bend and goes on next paragraph, they are just goes straight.

CodePudding user response：

try using the overflow-wrap property to break the string enabling it to wrap onto a new line.

overflow-wrap: break-word;

CodePudding user response：

Since in cases like these, people will just want to click the link and not read it, you could simply use overflow: hidden on the direct container, i.e. the lis of that list.

And you could also add text-overflow: ellipsis; to make clear that the link is longer than what is visible on the screen:

ul.link_list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.link_list {
  padding: 20px;
}

<h4>Link List</h4>
<ul >
  <li><a href="https://www.example.com/kjhadfkjh/oiuwoijwrv/ljnsvkjns/oiwueroiuwe/kjnsdvkjn/llksuerlkulku/lkamsclkm/lkjaelrkjl">https://www.example.com/kjhadfkjh/oiuwoijwrv/ljnsvkjns/oiwueroiuwe/kjnsdvkjn/llksuerlkulku/lkamsclkm/lkjaelrkjl</a></li>
</ul>