toddmo toddmo - 2 months ago 8
CSS Question

how do you make borders collapse on a span?

If you do the tryit editor on this html and make the result window narrow (like 200px), the border is inside the span as it occupies multiple lines. How can I "collapse" the border so it just makes a single (irregular) border around the span?
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

I'm not trying to alter the flow. I'm trying to "highlight a sentence" like you would with a highlighter. But I want a border too. But I want a single irregularly shaped border, not the default border.

Current problem:
enter image description here

[Don't forget to replace the editor html with this html]

<!DOCTYPE html>
<html>
<head>
<style>
.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
border-collapse:collapse;
}
</style>
</head>
<body>

<p> <span class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</span> The long word will break and wrap to the next line.</p>

</body>
</html>


EDIT The fixed span:

enter image description here

Answer

Use outline instead of border

.test {
  word-wrap: break-word;
  outline: 3px solid red;
}
p {
  width: 80%;
  margin: auto;
}
<p> You should know that <span class="test">this paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</span> The long word will break and wrap to the next line.</p>

Comments