I am fairly new to HTML so I wasn't sure how to go about finding the answer on how to do this but basically I am trying to box off a certain chunk of text and indent and fill in the background color for only a small section(not all the way across the width of the webpage) like this:boxing
You could do something like this:
//HTML
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
//CSS
.content {padding: 20px; background-color: #333}
.content p {background-color: #eee; margin: 0 0 20px 0; padding: 10px}
JSFiddle here: https://jsfiddle.net/qszx5uwh/
<div class="main_container">
<div class="box1">text for box 1</div>
<div class="box2">text for box 1</div>
<div class="box3">text for box 1</div>
</div> <!--main_container ends here-->
<style type="text/css">
.main_container{float:left;width:500px;}
.box1{float:left;width:500px;background:#cc0000;}
.box2{float:left;width:500px;background:#cccccc;}
.box3{float:left;width:500px;background:#f1f1f1;}
</style>
All you'll need is text wrapped with text-wrapper for setting paddings and background-color.
.text-container{
background-color: yellow;
padding-right: 50px;
}
<div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis odit, placeat repellendus ab sint dolore aut itaque earum molestias laudantium dolor nostrum nihil aperiam eos illum quia tempore beatae voluptate.</p>
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis odit, placeat repellendus ab sint dolore aut itaque earum molestias laudantium dolor nostrum nihil aperiam eos illum quia tempore beatae voluptate.</p>
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis odit, placeat repellendus ab sint dolore aut itaque earum molestias laudantium dolor nostrum nihil aperiam eos illum quia tempore beatae voluptate.</p>
</div>
</div>
Related
This is the kind of magazine style effect I am looking to recreate:
Using floats I seem only to be able to achieve text flowing underneath.
Using shape-outside I seem to be only able to use one shape per div of text at a time. Ideally I would be using multiple against the same div.
I have also tried using css grid, trying something to this effect to wrap text around the top and bottom of just one image:
.mygrid {
display: grid;
grid-template-rows: 150px 150px 150px;
grid-template-columns: 150px 150px;
grid-template-areas:
"para para"
"image para"
"para para";
}
.lorem {
background-color: red;
grid-area: para;
}
.image {
background-color: blue;
grid-area: image;
}
<div class="mygrid">
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="im">I'm the image!</div>
</div>
What you look for is a typical float use. Grid is not yet able to do these kind of things, flowing text through different grid cell
example
.l{float:left;}
.r{float:right}
/* demo */
img{padding: .25em .25em 0;}
p{width:400px;border:solid;margin:1em auto;}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<img class="l" src="https://dummyimage.com/100x50"> Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.<img class="r" src="https://dummyimage.com/100x50"> Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
From your code you posted, dropping the grid system and using float instead, an option could be : (setting image ahead in the flow)
.mygrid {
width:300px;
}
.mygrid:before {
height:150px;
float:left;
content:''
}
.im{
clear:left;
float:left;
width:150px;
height:150px;
background:gray;
display:grid;
align-content:center;
text-align:center;
}
/* 2 images ? */
body{
display:flex;justify-content:space-between;
}
.im~.im {float:right;}
.mygrid+.mygrid .im {background:silver}
.lorem:before{
content:'';
float:left;
height:300px;
}
<div class="mygrid">
<div class="im">I'm the image!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
</div>
<div class="mygrid">
<div class="im">I'm the image!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="im">I'm the image!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
</div>
I have tried like:
element::-webkit-scrollbar-corner {
border-bottom-right-radius: 20px !important;
}
but it is not working ..
Better way is to wrap the scroll-view into a view and apply border-radius to the outer view like below.
<div class="view">
<div class="scroll-view">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla sed
commodi pariatur minima cumque autem, tenetur sit sapiente natus
facilis. Consequatur reiciendis omnis voluptates earum obcaecati quia
alias nulla fugiat! Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Nulla sed commodi pariatur minima cumque autem, tenetur sit
sapiente natus facilis. Consequatur reiciendis omnis voluptates earum
obcaecati quia alias nulla fugiat! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Nulla sed commodi pariatur minima cumque
autem, tenetur sit sapiente natus facilis. Consequatur reiciendis omnis
voluptates earum obcaecati quia alias nulla fugiat! Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Nulla sed commodi pariatur
minima cumque autem, tenetur sit sapiente natus facilis. Consequatur
reiciendis omnis voluptates earum obcaecati quia alias nulla fugiat!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla sed
commodi pariatur minima cumque autem, tenetur sit sapiente natus
facilis. Consequatur reiciendis omnis voluptates earum obcaecati quia
alias nulla fugiat! Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Nulla sed commodi pariatur minima cumque autem, tenetur sit
sapiente natus facilis. Consequatur reiciendis omnis voluptates earum
obcaecati quia alias nulla fugiat!
</div>
</div>
<style>
.view {
height: 200px;
width: 200px;
border-radius: 20px;
border: 1px solid red;
padding: 10px;
}
.scroll-view {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.scroll-view::-webkit-scrollbar {
width: 20px;
}
.scroll-view::-webkit-scrollbar-thumb {
background-color: red;
border: 4px solid transparent;
border-radius: 20px;
background-clip: padding-box;
}
</style>
It would look something like this.
screenshot of output
The simplest solution I can think of, is to wrap the element that has the scrollbar inside another element, and then to give "overflow: hidden" and "border-radius: 20px" to the outer element:
/* This is just to see the effect better */
body {
background-color: #444;
}
/* This will make sure that the scrollbar is on the inner element */
.internal {
height: 100%;
overflow-y: scroll;
}
/* This will cut the borders */
.wrapper {
width: 200px;
height: 100px;
border-radius: 15px;
overflow:hidden;
background-color: #fff;
}
<div class="wrapper">
<div class="internal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus quis sapien quis ultrices. Nullam et nibh in odio lacinia feugiat et et ipsum. Praesent condimentum consequat aliquam. Ut ac dignissim arcu, in pulvinar odio. Nunc posuere mi id orci tristique blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non rutrum lorem. Aliquam non urna at nulla elementum tincidunt quis vitae erat. Suspendisse vel erat nunc. Nunc ac cursus urna. Nunc cursus vestibulum lectus vel mollis. Sed elementum eget felis ut facilisis. Vivamus at mattis felis.
</div>
</div>
I am working on a portfolio website with ReactJS + TailwindCSS.
Part of it is a section called 'About Me' where I have longer text. This longer text fits nicely as long as the text is not 'too long', then it reaches out of its parent div.
You can see similar effect on my Article Cards. I want them to stay the same size, nevertheless the amount of text in the footer.
This is my React Component where I render the the Article Cards:
function MainComponent() {
return (
<div className="container my-12 mx-auto px-4 md:px-12">
<div className="flex flex-wrap -mx-1 lg:-mx-4">
<ProjectComponent
projectName="Lorem Ipsum 1"
projectDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et nisl nulla. Sed tincidunt diam sit amet dictum posuere. Ut diam velit, rhoncus nec ligula vel, hendrerit hendrerit dui. Nunc eget augue faucibus, interdum diam condimentum, ullamcorper ex. Aenean ultricies urna at posuere pharetra. Nunc facilisis velit vitae ornare pretium. Suspendisse egestas sem eu facilisis tempor. Nullam ac malesuada libero. Mauris vulputate viverra mi, ac rutrum ante suscipit in. Donec vitae aliquet dolor. Aenean malesuada nec enim in tempus."
projectImage={TEST_IMAGE_URL}
projectUrl="someurl"
/>
<ProjectComponent
projectName="Lorem Ipsum 2"
projectDescription={TEST_ABOUT_ME}
projectImage={TEST_IMAGE_URL}
projectUrl="someurl"
/>
</div>
</div>
)
}
This is my Header Component (the About Me part that you can see overflow)
function HeaderComponent() {
return (
<div className="max-w-full h-1/5 rounded-sm shadow-lg flex flex-row">
<img src={profile} alt="Profile" className="flex-none w-64 p-2" />
<div className="flex-grow min-h-full">
<h1 className="text-lg text-white mt-10 font-sans">My Name</h1>
<p className="text-sm text-white mt-5 font-sans">{TEST_ABOUT_ME}</p>
</div>
<div className="flex-none w-64"></div>
</div>
)
}
Project Component that displays the Article Cards is wrapped in following DIV:
<div
className={`my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3 transform transition-all duration-1000 ease-out scale-${scale}`}
></div>
I am pretty sure that it is something with my Flexbox, I am still quite new with this, but I couldn't figure out how to make my texts not to overflow in Y axis.
You can use h-# + max-h-# + overflow-auto for this. Checkout a working example.
<div class="flex gap-x-8">
<div class="flex flex-1 flex-col">
<div class="h-48 bg-gray-100"></div>
<div class="h-48 max-h-48 overflow-x-hidden overflow-y-auto bg-blue-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde officiis qui rerum possimus fugit enim quos illo nostrum. Maxime soluta nostrum voluptas iusto autem, odit tenetur facere reprehenderit molestiae facilis?
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="h-48 bg-gray-100"></div>
<div class="h-48 max-h-48 overflow-x-hidden overflow-y-auto bg-blue-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente error, vel expedita odio, nobis magni tempore optio voluptas deleniti eum nemo corrupti animi provident ipsa deserunt voluptatem sint? Est, quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quidem recusandae officiis quaerat adipisci corrupti ab, dolorem, ipsum repudiandae quam asperiores esse iusto veniam cupiditate magnam! Aspernatur velit quae vero!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam hic magnam perspiciatis eligendi perferendis temporibus, provident nihil iste libero aliquam natus mollitia maiores. Consequuntur voluptatum repudiandae similique quo nulla accusantium!
</div>
</div>
</div>
Using HTML and CSS, how can I avoid a line-break between the span and the . ?
HTML:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at convallis
lorem, quis bibendum <span style="display: inline-block; color: red;">dolor</span>.
ACTUAL RESULT ON CERTAIN VIEWPORT WIDTHS:
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Proin at convallis lorem, quis bibendum dolor
.
DESIRED RESULT ON ANY VIEWPORT WIDTH:
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Proin at convallis lorem, quis bibendum dolor.
PS: Put the . inside the span is not the answer I am looking for :)
Here is a screenshot for the non-believers (note that I did remove a word from the example to get to the width where the issue occurs).
Would pseudos be an option for you? EDITED WITH POSITION
span {
display: inline-block;
border: 1px solid red;
}
span:after {
position: absolute;
content: '.';
color: black;
}
Wrapping it all up in a single span that doesnt wrap should work:
<span class="ext"><span>some long text</span>.</span>
span.ext {
white-space:nowrap;
}
If you can tolerate an extra wrap element you can do
span.wrap{white-space:nowrap;}
span.wrap span{
display: inline-block;
color: red;
white-space:normal;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at convallis lorem, quis bibendum <span class="wrap"><span>dolor</span>.</span>
However in some comments i noticed you mentioned the scenario where you have a lot of text in the inner span which causes line breaks. In that case you have other problems besides the following period as an inline-block element that has line breaks internally will move as a block and not follow the previous word from it.
see
span{
display: inline-block;
color: red;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at convallis
lorem, quis bibendum <span>dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab delectus sunt pariatur omnis, voluptatem vero accusantium rem a, est id nihil vitae cum impedit magnam itaque qui. Quaerat maxime numquam eveniet eaque possimus quos doloremque natus sit molestiae iste, autem, rerum facilis facere mollitia modi vel fuga non, tempore quibusdam.</span>.
I want the left and right columns enlarge to the center column height, but they doesn't expand and the layout is terrible.
I need a simple three columns layout but I don't want a fixed dimensions in pixels nor ems.
HTML code:
<div id="contenedor">
<div class="bloque" id="head">
Cabecera
</div>
<div class="bloque" id="left">
Bloque-2
</div>
<div id="contenido">
<div class="bloque" id="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut justo sed nisl commodo imperdiet vitae molestie orci. Cras urna sem, malesuada et feugiat sed, accumsan nec dolor. Vivamus hendrerit ante non urna bibendum, et tristique libero ultrices. Phasellus auctor tempor leo, quis pretium nisl posuere sit amet. Vestibulum eget erat dolor. Integer venenatis eu libero ac pharetra. Nullam nec ligula et quam bibendum semper. Phasellus ...
</div>
<div class="bloque" id="right">
Bloque-3
</div>
</div>
<div class="bloque" id="foot">
Pie
</div>
</div>
CSS code:
#contenedor {
background-color: #EEE;
width: 100%;
height: 100%;
}
.bloque {
background-color: #CCC;
}
#head {
width: 100%
height: 10%;
text-align: center;
}
#left {
width: 25%;
float: left;
min-height: 85%;
}
#right {
width: 20%;
float: left;
min-height: 85%;
}
#center {
width: 55%;
float: left;
background-color: #FFF;
}
#foot {
clear: both;
text-align: center;
min-height: 5%;
}
CSSDeck.com
I have updated your code and used a trick to get the result.
UPATED CODE
I hope that my answer will help you
HTML
<div id="container">
<div id="header">header</div>
<div id="nav">
<p>link 1</p>
<p>link 2</p>
<p>link 3</p>
</div>
<div id="aside">
<h3>text</h3>
<p>text2</p>
<p>text3</p>
<p>text4</p>
</div>
<div id="content">
<h2>head text</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
</ul>
</div>
<div id="footer">© user</div>
</div>
DEMO
Just add in your css
html, body
{
height:100%;
}
and you you could set height of your div left and right in pourcentage at your own desire...
and
<div id="contenedor">
<div class="bloque" id="head">
Cabecera
</div>
<div class="bloque" id="left">
Bloque-2
</div>
<div id="contenido">
<div class="bloque" id="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut justo sed nisl commodo imperdiet vitae molestie orci. Cras urna sem, malesuada et feugiat sed, accumsan nec dolor. Vivamus hendrerit ante non urna bibendum, et tristique libero ultrices. Phasellus auctor tempor leo, quis pretium nisl posuere sit amet. Vestibulum eget erat dolor. Integer venenatis eu libero ac pharetra. Nullam nec ligula et quam bibendum semper. Phasellus ...
</div>
</div>
<div class="bloque" id="right">
Bloque-3
</div>
<div class="bloque" id="foot">
Pie
</div>
</div>