Enclose several lines of text within a border in the midst of other content

I'm looking to add a stylish border around multiple lines of text in a paragraph without having the border appear on each line individually.

While I could enclose all the text in a div, it would separate the content from the rest of the paragraph.

What I'm aiming for is a seamless paragraph with one sentence spanning multiple lines and featuring a bordered top, sides for the length of the lines, and a bordered bottom. The border should stop at the end of the sentence, before the next sentence starts.

Here's an example:

https://i.sstatic.net/68cwl.png

javascripthtmlcsscoding-style

Answer №1

Experiment with nesting 2 inline elements

  • For the inline parent: add an outline

  • For the inline child: include position, a background, and optionally a box-shadow to bridge any gap between lines

b {
  outline:solid red;
}
span {
  position:relative;
  background:white;box-shadow:0 0 0 1px white;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta eros nec odio efficitur ultricies.</p>'<b><span>Cras tincidunt suscipit fermentum. Donec venenatis fringilla libero id laoreet.'</span></b> Proin dignissim et leo at finibus. Nam in mollis turpis. Maecenas nunc risus, posuere sed condimentum quis, volutpat vel tortor. Nullam ornare neque sapien'<

If you want straight lines on both sides, try using text-align:

p {
text-align:justify
}
b {
  outline:solid red;
}
span {
  position:relative;
  background:white;box-shadow:0 0 0 1px white;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta eros nec odio efficitur ultricies.<b><span>Cras tincidunt suscipit fermentum. Donec venenatis fringilla libero id laoreet.'<</span></b>Proin dignissim et leo at finibus. Nam in mollis turpis. Maecenas nunc risus, posuere sed condimentum quis, volutpat vel tortor. Nullam ornare neque sapien</p> 

Check out this codepen for hands-on practice: http://codepen.io/gc-nomade/pen/dWPGXv

Answer №2

After much effort, this is the closest I've come to achieving the desired outcome:

div{
  font:500 12px/14px arial;
}
p{
  display:inline;
  background:#ff0000;
  padding:0 1px;
}
.whitepad{
  background:#ffffff;
  vertical-align:top;
  border:1px solid #ffffff;
  padding:1px 0 0;
  margin:0 -1px;
}
.redpad{
  position:relative;
  top:1px;
  left:1px;
  background:#ffffff;
  margin:0px 3px 0px 1px;
  border-bottom:1px solid #ff0000;
}

  
<div>
  <p>
    <span class="whitepad">This text is not outlined</span><span class="redpad">while this text is fully outlined in red as requested. Keep searching and you will find. Pay attention and you will hear. This is filler text for testing purposes. It needs to be lengthy to test the feature. Even longer than what's here. It must continue to get longer. Okay, that's enough. Credit to me </span><span class="whitepad">and then this text is not outlined again</span>
  </p>
</div>

I plan on refining this further, but wanted to share it here for others to view.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ionic: How come my image is not loading with HTTP.GET?

I have been attempting to populate a gallery in my Ionic application by fetching images from a JSON file, but I am encountering issues. While following a guide on creating a grid-like image gallery using the Ionic framework (https://blog.nraboy.com/2015/03 ...

javascripthtmlangularjshttpionic-framework

Converting an array of objects into a single object: A step-by-step

I'm looking to transform an array of objects into a final output of objects. My initial array of objects looks like this: [ { "id": "11", "value" : "9999","sample":"1"}, { "id": "22", "value" : "8888","sample":"2"}, { "id": "33", "value" : ...

javascriptnode.js

Tips on triggering an AJAX call to load additional content when a user reaches the bottom of the page for the first time

My goal is to dynamically append an HTML file to a div element when the user reaches the bottom of the page. However, I have encountered an issue where the script appends the content multiple times after refreshing the page. It seems like the Boolean varia ...

javascriptjqueryhtmlajax

One way to retrieve API responses in node js is by utilizing callback functions

I am currently exploring callback functions and utilizing the request module in node js to retrieve information. As Javascript is asynchronous, I am struggling with how to properly return my response. Below are snippets of my code. In my app.js file: var ...

javascriptnode.jsrest

Styling CSS code to centrally align a background image in the footer of a

Within my MVC app, there is a footer displayed on every page that includes an image. I am looking to align the image in the center if possible. The current CSS code for the footer is as shown below: footer { position:absolute; bottom:-150px; /* Th ...

css

What is the best way to address cookie issues while working on a full stack application that utilizes Vue and Express.js?

Developing a full stack application requires me to use Vue on port 5173 and Express on port 3000. One issue I face is the inability to store credentials in the frontend for backend communication during development. This challenge can be addressed by servin ...

javascripthtmlvue.jsfrontendbackend

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? https://i.sstatic.net/E6G56.gif Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div ...

javascripthtmlgesturehammer.jspan

Multer's re.file function is returning an undefined value

I am seeking assistance with my coding project. I have a setup that uses React on the front end, Node.js on the backend, and MySQL as the database. The issue I am facing is related to file transfer using Multer in Node.js. When trying to transfer files, Mu ...

javascriptnode.jsreactjsexpressmulter

Merging the Select and Input elements side by side using Bootstrap grid system

Is there a way to combine all form group items like Select and Input using only the bootstrap framework? I attempted the method below, but there is an extra space between the Select and Input Box. Check out the DEMO ...

csstwitter-bootstrap

Displaying an alert message when incorrect login credentials are detected in React Native

My objective is to display an alert message when a user login attempt fails, however, the alert does not appear. Below is the code I am using in React Native: login onPressLogin(){ fetch('http://192.168.1.10:3000/users/login',{ m ...

javascriptnode.jsjsonreact-native

Automatically substitute a term with a clickable link

Is there a way to automatically turn every word into a hyperlink? I have specific words that need to be linked. For example, I want Ronaldo (Only for the First Appearance) to link to a certain page. However, my attempted method did not work. <p> Ro ...

javascripthtmljquery

Exploring the capabilities of ECMAScript generators within the Intel XDK Simulator

I am attempting to utilize a generator that has been declared using function* in Intel XDK. The simulate function within XDK is said to be based on Chromium, though it's difficult to determine the specific version ('about' box and similar fe ...

javascriptintel-xdk

The grid expands to cover the entire width of the browser

Hello everyone, I am a newbie when it comes to JavaScript and CSS. I am in need of a code, whether it be JavaScript or CSS, that will allow me to stretch out a grid layout measuring 5 x 2 along with pictures to completely cover the width of the browser wi ...

javascripthtmlcssdrupal

Dynamically select checkbox groups based on items already listed in a textarea

Hello! Would you be able to review this example and provide guidance on how I can use jQuery to dynamically select the checkboxes that have the same text as in the textarea below? <br /> <br /> Default Items From Database <br /> < ...

javascriptjquerycheckbox

What is the best method for linking my chatbot's user interface to the API.AI server host using either the Python SDK or JavaScript

Looking for a way to seamlessly integrate my chatbot UI, created using HTML and CSS, with the API.AI server using the token provided by API.AI and Python SDK? Below is the HTML code snippet for reference: <!DOCTYPE html> <html> <head> ...

javascriptpythonhtmlcssdialogflow-es

Ways to make a jsonp request without including the 'callback' in the URL

I've been working on retrieving information from an Icecast Radio station using their API, which offers the status-json.xsl endpoint to access this data. Despite the format being in xsl, I suspect it returns a JSON file. However, I've encountere ...

javascriptjqueryjsonxmlxslt

Error: React is throwing a SyntaxError because a ")" is missing in the argument list

While working on a React-typescript project using Vite, I encountered an issue where my page was displaying blank and showing the error : Uncaught SyntaxError: missing ) after argument list (at main.tsx:6:51) This error was found in the main.tsx file : im ...

javascriptreactjstypescript

Enhance form validation by utilizing jquery.validate to display appropriate icons indicating correct and incorrect input, with the option to

Trying to replicate the functionality of the jQuery validate plugin demo seen here, I am facing an issue on my own website. Upon clicking submit after the page loads, the plugin displays validation messages with a cross symbol. However, upon entering text, ...

jqueryhtmltwitter-bootstrap

Tips for transforming this jquery script into "vanilla" javascript

Looking for assistance in translating this jQuery code into vanilla JavaScript (without the need for the jQuery library). var myConsole={ panel:document.querySelector('#something'), log:function(message){ this.panel.innerHTML+= m ...

javascriptjquery

Error: The variable success_msg has not been defined in the EJS Reference

I am in the process of developing a library website for my school that includes login and administration capabilities. I am relatively new to node.js and EJS, but I recently revamped the routing and page delivery system to use EJS and express. As part of u ...

javascriptnode.jsexpressejs