Is it possible to break line after every anchor element using CSS and not doing it manually in HTML?
I've already tried some word-breaks, etc., but none of them worked.
CodePudding user response：
If I'm understanding the problem, you want to create a link break after every a link element instead of continuing text after the link.
I believe you're looking for the pseudo-element ::after. See the following code solution. This will create a block-element after the link content and create a line break for content following immediately to be on a new line. Using properties content: "" and display: block applied to a::after pseudo-element makes this possible.
/* Provided so the links don't
* take you away from the example */
document.querySelectorAll("a").forEach(function(link) {
link.addEventListener("click", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
});
});a::after {
content: "";
display: block;
}<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipiscing elit. Praesent at interdum quam. Nunc accumsan libero bibendum, dignissim sapien eu, posuere ligula. Duis vel nisl vitae risus ornare lobortis. Donec semper aliquet tellus, ac mollis libero
interdum at. Proin congue tempus accumsan. Pellentesque a mattis ante, vitae molestie erat. Vestibulum mattis sodales ante sed egestas. Praesent porta urna at eros varius, vitae semper diam sollicitudin. Donec laoreet quam elementum, tristique nulla
ac, iaculis lectus. Aenean id posuere lectus. Duis et accumsan mi. Sed sit amet aliquet ipsum.</p>
<p>Aliquam sed orci tortor. Pellentesque ac nunc suscipit, sagittis libero et, congue magna. Duis vulputate commodo metus, eget <a href="">placerat</a> metus fringilla sit amet. Duis elementum, leo pretium varius posuere, felis dui tempus est, sed dictum
quam nisl eu tortor. Sed imperdiet sagittis arcu nec malesuada. Aliquam aliquam ante ut justo iaculis, sit amet eleifend purus condimentum. Donec pulvinar viverra tristique. Morbi hendrerit justo accumsan arcu vulputate, ac ornare augue sagittis. Nullam
fermentum ipsum erat, in luctus eros vulputate a. Vestibulum sit amet pulvinar nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id metus in justo volutpat egestas. Integer porttitor nisi non turpis
gravida, et rhoncus quam dapibus.</p>
<p>Nullam malesuada risus massa, nec placerat est dignissim sed. Quisque posuere tellus id eros sodales sodales. Etiam hendrerit, ante vel posuere scelerisque, lacus neque faucibus tortor, vitae feugiat odio est eget tellus. Curabitur fermentum et felis
sed pellentesque. Vivamus facilisis, augue non vehicula dictum, mi ipsum congue augue, sed fringilla urna risus non nunc. Donec eleifend, sem <a href="">pellentesque</a> volutpat viverra, sapien mauris venenatis leo, vel rhoncus orci elit non arcu.
Fusce condimentum tellus eu sollicitudin sollicitudin. Sed sed sapien varius risus vestibulum mattis. In sollicitudin lacus aliquet finibus porttitor. Praesent gravida auctor bibendum. Donec placerat vehicula arcu. Vivamus ac massa ac dui venenatis
tincidunt et vel ligula. Nulla luctus eget elit a convallis. Sed ac neque id tellus tincidunt pulvinar.</p>CodePudding user response：
body * {
display: block;
}<span>I am span</span>
<i>I am i</i>
<b>I am b</b>
<div>I am div</div>
<p>I am p</p>