Note that there are some explanatory texts on larger screens.

plurals
  1. POadding a link to justified text
    primarykey
    data
    text
    <p>I was wondering if I could seamlessly add a link to justified text. I would like for the link to be justified within the text and keep its position. The desired output will look like one paragraph. I have tried two methods thus far.</p> <p><strong>one</strong></p> <p>The html :</p> <pre><code>&lt;div&gt; &lt;p&gt;This is a chunk of text. This is a chunkof text. This is a chunk of text.&lt;/p&gt; &lt;a href="#"&gt; This is a link.&lt;/a&gt; &lt;p&gt;This is a chunk of text. This is a chunk of text. This is a chunk of text.&lt;/p&gt; &lt;/div&gt; </code></pre> <p>css : </p> <pre><code>* { margin: 0; padding: 0; } div { width: 200px; } p, a { position: relative; float: left; text-align: justify; display: inline; } </code></pre> <p>the result is :</p> <p>a chunk of text, a line break, the link, a line break, then the last chunk of text.</p> <p>I would like to seamlessly add the link to the justified text. is that possible with just css?</p> <p><strong>two</strong></p> <p>When I put the link in the paragraph, it seems to randomly insert it near the actual location between text nodes. Could be treating the link as one word?</p> <p>html : </p> <pre><code>&lt;div&gt; &lt;p&gt;This is a chunk of text. This is a chunkof text. link-&gt;&lt;a href="#"&gt; This is a link.&lt;/a&gt;&lt;-link This is a chunk of text.&lt;/p&gt; &lt;p&gt;This is a chunk of text. This is a chunk of text. This is a chunk of text.&lt;/p&gt; &lt;/div&gt; </code></pre> <p>In the output the link does not line up with "link-> &lt;-link"</p> <p>I suppose if this is the better of the two options I would just like to know why the link won't line up with it's position alliterative to the text nodes. "link->", "&lt;-link"</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload