CSS/Javascript: How to draw minimal border around an inline element?


Tags: javascript,html,css,firefox

Problem :

Consider the following HTML:

<p>This is a potentially large paragraph of text, which <span>may get 
wrapped onto several lines when displayed in the browser.
I would like to be able to draw a minimal</span> box round the span</p>

I would like to draw a minimal border round the span.

That is:

  • If the span is rendered on a single line, the border is equivalent to setting a CSS style of border: 1px solid black;
  • If the span is rendered on multiple lines, the border is drawn around the outermost edges of the span, not between the lines which it crosses. This is equivalent to setting a CSS background color on the span, and drawing the line around the edges of the highlighted area.

I am fairly confident this cannot be done with raw CSS alone (in the second case). Solutions involving javascript libraries, or those which are Firefox-specific, are acceptable.

This is a mock-up of how the second scenario should look:

Second scenario mock-up



Solution :

Consider adding an outline, not border http://jsfiddle.net/tarabyte/z9THQ/

span {
  outline: 2px solid black;   
}

Firefox draws outline between lines. There is a workarond: http://jsfiddle.net/z9THQ/2/

HTML:

<p>
   This is a potentially large paragraph of text, which 
      <span class="wrapped"><span> 
        may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal
      </span></span> 
   box round the span
 </p>

And CSS:

.wrapped {
   outline: 2px solid black;
}

.wrapped span {
    border: 1px solid white;
    background-color: white;
    position: relative;
    z-index: 1000;
}

    CSS Howto..

    How to Make Tabs In CSS?

    how to make content to be fixed inside scroll div using only css?

    How to get an App made using JavaScript to autoresize for other Apple Devices?

    How to center div and ul using CSS?

    How do I add an underline to unvisited links only?

    How to measure the amount of time an animation took place using JavaScript

    How do you create multiple box-shadow values in LESS CSS

    How to display a button over a picture only when hovering it?

    How to show parts of sprite with CSS keyframes to create animation?

    CSS: How to style text in a box with a limited height

    How to dynamically add .css to a custom Javafx LineChart Node?

    How do I get a div to fit to the screen with no overflow in CSS

    How can I make a pointy arrow with a div in CSS

    How can I properly create a contenteditable “Font Tester” type editor with CSS classes applied by JQuery?

    How to make three DIV align vertical if not enough space horizontal

    How do I prevent sliced images in the CSS background from sitting on each other?

    How do I use a variable inside of a shorthand if/else statement in a PHP for() loop?

    CSS : How to add an absolute div to a scrollable background? [closed]

    css responsive design: how to improve my page ?

    How to apply different css style for IE 10 and 11 only?

    How do I vertically center an img in a div?

    How to emulate Google's thick, red underline text decoration

    How to make a CSS Menu “Selected” with Hover Image Gallery Effect?

    How to make SpriteSpin responsive?

    how to give top property define in css for chrome or firefox

    How to overlap elements inside of a ng-repeat list - position: absolute?

    Angular. How to set css properties for “after” and “before” DOM psuedo elements

    How to Change CSS Styling on a Checkbox on Hover with JQuery

    How to customize the HTML5 input range type looks using CSS?

    Meteor: How can I use Spacebars to apply different CSS elements?