This question already has answers here:
text-align justify not working
(11 answers)
Closed 3 years ago.
I'm trying to display a block of text with word-wrap but uses a variable size of white spacing so the text fills the width of the box evenly on each line. (see picture)
I'm stumped on this one and google searches haven't come up with anything. I'm also utilizing bootstrap and jquery in the site, so if either of those can create a solution that would be fine too.
You need to justify the text. Use the text-align: justify to do that. More information can be found on CSS Tricks.
.text-justified {
width: 200px;
text-align: justify; /* this is the important line, it justifies the text */
border: solid black 2px;
padding: 5px;
}
<p class="text-justified">This text will be justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor felis et augue tristique euismod. Mauris at rutrum justo. Aenean mollis rutrum arcu, vitae feugiat dolor pharetra et. </p>
Related
I have an HTML component that has an image floating to the left and text on the right. When the text's height is larger than the image, the text will wrap to the left. I want to add some padding between the image and the wrapped text. I could add a bottom padding to the image, but I don't want the padding to show up when the text is not wrapped. Here is what the component should look like when the text is no wrapped. The image should not have a bottom padding:
Here is what it should look like when the text is wrapped. There should be some padding between the image and the wrapped text:
Is there a way to do this through css?
An idea in case the image height is fixed or known:
.container {
border:2px solid;
min-height:200px; /* same as image height */
font-size:19px;
}
.container img {
float:left;
margin:0 20px 20px 0;
}
<div class="container">
<img src="https://picsum.photos/id/1014/200/200" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum quis mi vitae molestie. Sed scelerisque fringilla interdum. Duis ac purus nisl. Nulla vehicula vehicula turpis id convallis. Etiam nec nisl nibh. Mauris lorem mauris, vehicula nec massa in, accumsan egestas eros. Integer vehicula nulla sed enim laoreet maximus. Vestibulum at interdum sem. Sed interdum volutpat massa,
</div>
Yes, you can do it. Follow this example for HTML and css.
body {
margin: 20px;
text-align: center;
}
img {
float: left;
margin: 0px 10px 5px 10px;
}
p {
text-align: justify;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wraping an Image with the text
</title>
</head>
<body>
<div class="square">
<div>
<img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1024px-Image_created_with_a_mobile_phone.png" alt="Longtail boat in Thailand" width="300px">
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course.
</p>
</div>
</body>
</html>
I've searched for similar questions but none seem to address this specific issue, what I'm trying to do is accomplish something like this:
Label -------------------
-------------------------
-------------------------
where the "Label" is the actual label and the "-" represents my text area, I've tried everything from floats to inline the elements but I just can't figure this out, is there a way to accomplish this without having the label to be absolute therefore hiding the text when the textarea is scrollable?
I Don't know about doing this with a <textarea> without involving JS, But you can always use contenteditable
div[contenteditable] {
border: 2px solid;
font-size: 1.2em;
width: 200px;
height: 200px;
}
[contenteditable]>span {
color: orange;
}
<div contenteditable>
<span contenteditable="false">Label:</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae rhoncus felis, vel auctor tortor. Nunc porttitor arcu eget luctus feugiat.
</div>
There's room for improvements still and require management of course.
I have
<div id="aboutPyKov">
<h2 id="pyKovSubheading">About PyKov</h2>
<p id="pyKovIs">Lorem ipsum dolor sit amet,<br/>consectetur
adipiscing elit.<br/>Vestibulum congue mattis odio.<br/>Nulla f
acilisi. Quisque tempus<br/>varius enim, quis mattis metus,
<br/>auctor quis. Lorem ipsum dolor sit<br/>amet, consectetur
adipiscing elit.<br/>Pellentesque a euismod sem, a<br/>convallis
turpis. Donec aliquet<br/>quis leo at fermentum. Maecenas<br/>ut
lacinia magna. Maecenas gravida<br/>interdum turpis non
fermentum.</p>
</div>
For styling, I have
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
}
This works fine, however it shows a dotted border around the whole width of the whole page. I want it to be self-contained, but instead, it goes around the whole screen as you can see in this picture. How do I make it so it only goes around the text? Also, the top border is hugging the background color above it. I would also like to know how to change that.
This is CSS level 1: block and inline. Block elements take up 100% of available width unless you set them to float or set an explicit width. Either set the border to the paragraph element or set a width to your div.
Try adding padding = 0px" to your <p> tag and <h2> tag,
p, h2 {
padding: 0px;
}
because <p> and <h2> tags have default padding applied.
Just change the display attribute
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
display:inline-block; // just change the display
}
I have three figures, each with different sizes and different figcaptions.
I want them to display inline (so if the last figure doesn't fit in the line, it'll move the next line).
Here's what I have so far: https://jsfiddle.net/Jonjei/31kteL68/6/ (The preview corner isn't as accurate to what I see in a normal window)
Images are random placeholders and do not belong to me.
The problem:
The figcaptions take up all the space and are pushing the next figure to the next line.
Solutions I'm looking for:
Make each figcaption text stop at the edge of its figure and move to a new line within the figcaption.
Have the figure (with its figcaption) move to the next line if it's too large to fit in the first.
Any other general suggestions and tips are more than welcome. I managed to make the text work with a single-row table, but that doesn't help when I want the last figure to move to the next line.
.container {
border: 5px transparent solid;
border-radius: 2px;
margin: 2% 10% 2% 10%;
padding: 0px 7% 0px 7%;
}
.fig-container{
display:flex;
width:100vw;
}
figure{
flex-grow:1;
display:block;
text-align:left;
background:#e3e3e3;
}
<!-- images are placeholders and belong to their respective owners -->
<div class="container" align="center">
<h1 style="font-size: 1.5rem">OTHER NOTES</h1>
<div class="fig-container">
<figure><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple5/v4/da/83/ae/da83ae00-d126-1200-1588-c74c59aa1a38/source/256x256bb.jpg" alt=""><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption></figure>
<figure><img src="https://www.petmd.com/sites/default/files/petmd-puppy-weight.jpg" alt=""><figcaption>Duis ut nulla sed dolor ultrices ornare sed pharetra ligula. Phasellus sapien augue, eleifend ut odio vel, suscipit auctor purus.</figcaption></figure>
<figure><img src="https://vetstreet-brightspot.s3.amazonaws.com/56/d831705c9f11e19be6005056ad4734/file/puppy_training-tips-335mk022012-200454626-001.jpg" alt=""><figcaption>Proin volutpat dictum leo eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</figcaption></figure>
</div>
I have a problem that I can't find the answer anywhere on the net.
In my project, I want to have a picture and when hovering it, I want a textarea to appear with some text. This part is working very well.
The part that bug me is that I also want it to stay at opacity:1 when the cursor is focused in the textarea.
I want to achieve this using CSS only if possible.
I am able to have the textarea:focus work since I can make it change the background color easily.
Here's the JS Fiddle to show you all:
http://jsfiddle.net/X7Qu6/
HTML:
<div class="charpicture">
<div class="BACKGROUNDdiv"><span class="BACKGROUNDtitle">Background</span>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales erat justo, nec fermentum mauris tristique vitae. Sed dignissim dapibus imperdiet. Morbi blandit in mi ac tincidunt. Donec at purus. </textarea>
</div>
</div>
CSS:
.charpicture:hover .BACKGROUNDdiv,
.BACKGROUNDdiv:hover{opacity:1;}
.BACKGROUNDdiv textarea:focus{background:green;opacity:1;}
Your textarea is inside BACKGROUNDdiv, so when it's hidden (opticity:0), there is no option to make any of its content visible. Textarea and your background have to be independent. Overlapping can be achieved with some relative/absolute positioning.
Example: http://jsfiddle.net/X7Qu6/1/
Is that what you was looking for?