Finding a way to display outlines around the current text on a web page

As far as I know, this is not possible.

I would like to draw a diagram around the text that flows around a floating image on a web page. Any CSS or Javascript tricks that could help with this would be appreciated.

Horrible layout: http://i.stack.imgur.com/Wf7BW.png

.

Edit:

This link to the demo for Aloha Editor will give you an idea of ​​the purpose of the outline: http://www.aloha-editor.org/demos/wordpress-demo/

Why?

In the CMS I'm working on, users can edit information in contentEditable divs on the front of the website. In the situation above, having a diagram around the entire div, confusion is created for the user, because they cannot edit this black block.

, . , (, div, , div ), . - div , , . , .

, , , . <p> contentEditables, , .

+3
2

... , Javascript! , jQuery. , , .

jQuery . , .

: http://jsfiddle.net/E64w3/

+1

, , , " ", .

Live Demo

CSS

#content {
    border: 3px solid orange;
    font: 12px sans-serif;
    width: 500px
}
#content .imgContainer {
    padding: 0 9px 9px 0;
    float: left;
    margin: -3px 9px 9px -3px;
    border-right: 3px solid orange;
    border-bottom: 3px solid orange;
    background: #fff
}

HTML:

<div id="content">
    <div class="imgContainer"><img src="http://dummyimage.com/220x204/f0c/fff" /></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus  diam porttitor dui eleifend egestas. Nullam eros purus, dapibus ut  ultrices lacinia, ornare id ante. Suspendisse arcu mauris, fermentum  quis vehicula non, posuere et urna. Suspendisse hendrerit nulla quis  metus condimentum ultricies. Fusce vel egestas tortor. Sed eleifend  tincidunt eleifend. Aliquam erat volutpat. Ut hendrerit, metus nec  posuere dignissim, mauris felis pharetra erat, at elementum eros velit  id libero. Mauris egestas, felis in semper vestibulum, eros felis  lobortis dui, sed consectetur justo urna volutpat urna. Vestibulum  vestibulum congue magna id pharetra. Aliquam venenatis consectetur  rhoncus. Etiam convallis laoreet mauris id rhoncus. Nullam tincidunt  nunc sit amet turpis tincidunt quis hendrerit mauris porttitor. Cum  sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus.
</div>
+4
source

Source: https://habr.com/ru/post/1794306/


All Articles