Is there a way to wrap my multi-line text inside a div with a background color that automatically adjusts its size based on the text length?
.multiline{
padding:0px;
white-space: pre-wrap;
height: 100px;
width: ;
margein:0px
}<div style="background-color:#FFD382;" align="left" class="multiline">
Peter
How are you
2016-8-10
</div><div align="center" class="paragraph">
<span style="background-color:#A4D7CF;">Sarah<br/>What's up?<br/>2022-3-15</span>
</div>
To style the text and its surrounding area with a background color, you need to make sure the text is set as an inline element.
Check out this example:
.multiline {
padding: 0px;
white-space: pre-line;
height: 100px;
margin: 0px;
}
span {
background: white;
}<div style="background-color:#FFD382;" align="left" class="multiline">
<span>Peter
How are you
2016-8-10</span>
</div>If you prefer, you can also achieve this by adding display:inline to .multiline:
.multiline {
display: inline;
padding: 0px;
white-space: pre-line;
height: 100px;
}<div style="background-color:#FFD382;" align="left" class="multiline">
Peter
How are you
2016-8-10
</div>Is there a way to apply a background color around text that dynamically adjusts in size based on the length of the text?
If you are unable or prefer not to wrap the text in its own inline element for applying a background, your options are limited.
The only method I can think of to add a background color specifically to the text itself is by using `text-shadow` with multiple shadows.
.multiline
{
padding:0px;
white-space: pre-wrap;
height: 100px;
width: ;
margin:0px;
text-shadow:
0 0 1px green,
0 0 2px green,
0 0 3px green,
0 0 4px green,
0 0 5px green,
0 0 6px green,
0 0 7px green,
0 0 8px green,
0 0 9px green;
}<div style="background-color:#FFD382;" align="left" class="multiline">
Peter
How are you
2016-8-10
</div>Consider using span in place of div and pre-line instead of pre-wrap
.multiline {
padding: 0px;
white-space: pre-line;
height: 100px;
margin: 0px
}<span style="background-color:#FFD382;" class="multiline">
Peter
How are you
2016-8-10
</span>I want to create a unique extended navigation bar for my website that has the following structure: <nav class="nav-extended"> <div class="nav-wrapper"> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a ...
When utilizing stringify, the json data gets formatted and appears in an alert message. However, when attempting to display it in an actual link, it is not showing up. Upon checking the console, an error was displayed stating that "duplicates are not allow ...
I'm currently facing an issue with my CSS layout. Despite managing the problem in IE and seeing everything work well, the footer container has mysteriously disappeared! I've attempted to recode the CSS without success, even after trying for days ...
Looking to attach a right hand column to the top of the window as you scroll using Bootstrap 3.0 and 'affix' feature. Here is the HTML for the element: <div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477"> This is ...
I am currently working on a box component that contains flex items. Unfortunately, I am facing an issue where the box width remains constant and causes overflow when I try to reduce its size in order to accommodate all the items. Can anyone provide guidanc ...
On our ColdFusion page, we have a dynamic list of paired divs created using a loop over a query. For example, each pair consists of internshipHandleX and internshipHiddenX: <div id="internshipHidden#internship.currentrow#" class="hidden pop-up"> We ...
I encountered a persistent error that I just can't seem to resolve. My goal is to showcase a chart using Chart.js when the mouse hovers over the canvas. However, upon hovering over the canvas, I keep getting a TypeError: t is null error. Error: { ...
Essentially, I have a structure similar to this example The formula for every cell in the last column should be: value[i][2] = value[i-1][2] + value[i][0] - value[i][1] I'm currently facing two issues. The first one arises when attempting to progra ...
I'm currently utilizing the fullPage.js plugin sourced from this link: . I have successfully implemented vertical slides by using the following HTML code: <div class="section" id="section2"> <div class="slide" id="slide1"> ...
As a beginner in javascript, I am working with a JSON file that contains an array of objects. Each object includes two properties: a borough and mappings. Mappings have two sub-properties called macro and neighborhoods. The macro represents a larger neighb ...
<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...
After spending an excessive amount of time searching for this information, I finally figured it out. So here you have it, I'm sharing the steps to create a custom "ARE YOU SURE YOU WANT TO LEAVE THIS PAGE?" dialog. ...
I'm having difficulty understanding why there is a significant vertical offset (around 170px) between one <li> element and the next. This issue seems to only occur in Chrome and not in Firefox, specifically within <li> elements when PHP co ...
I am currently working with jQuery and PHP. I have a button labeled "Edit" but whenever I click on it, the alert message pops up twice instead of just once. Below is my HTML code within the PHP tags: <?php $PostComment2='<div class="button1 ...
I need to display multiple tabs, with each tab having a table where the values are populated from a database. The number of tabs is dynamic and fetched from another page of the application. All tables have the same structure but different values. How can I ...
Greetings Esteemed Developers I am a newcomer to web development and I have been practicing. However, I encounter difficulties with my CSS at times. Today, I have a query for you all; I am trying to create a fixed sidebar but I am facing challenges. Despit ...
In my current project, I am using React, Node, Express, and Postgres to fetch data from a database. The issue I'm facing involves creating a scrollable table within a div that spans the entire screen width. Initially, I had to apply display: block to ...
I am working on an Angular2 app that includes several components, some of which I want to reuse multiple times on a single page. Instead of having three separate components, I am looking to refactor and combine their functionalities into one. The basic st ...
Hi there, I'm a newcomer to Stack Overflow and currently diving into the world of HTML/CSS. I've hit a roadblock with my latest project - I'm trying to create a gallery of album covers, but when I try to 'zoom in' on the webpage (n ...
This is the HTML/EJS code snippet: <div class="Edit-Panel" style="display: none;"> <div class="Edit-Wrapper"> <div class="Editing"> <p class="Edit-Header ...