This question already has answers here:
Limit text length to n lines using CSS
(17 answers)
Closed 1 year ago.
I'm trying to achieve a text-overflow of ellipsis in a paragraph of an undefined width. Most of the examples for this, state that the paragraph has to have a defined width but for my scenario, i wouldn't be able to set a specified width.
Below is an example of what i'm trying to achieve
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis...
Can you please check the below code? Hope it will work for you. You can use line-clamp property instead of overflow ellipsis, it truncates text at a specific number of lines and you change the line-clamp value as per your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/qde6tyhs/1/
.box {
width: 300px;
}
.box p {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan fermentum suscipit. Fusce porta pretium volutpat. Aenean ornare arcu non justo aliquam molestie. In venenatis in metus id accumsan. Ut porttitor lacinia massa vitae volutpat.</p>
</div>
Related
I have figured out how to set two HTML elements side by side. I want to have a text paragraph on the left and an image on the right.
Currently, my code is:
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<div style="width: 50%; height: 100px; float: left;" >
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div style="margin-left:50%; "><img style=" max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" >
</div>
</div>
</body>
</html>
This is results in an two column layout, but I want to know how to format.
I want to add padding to the text, but when I do so, the image is messed up completely. How can I padding padding to my text so that there is space around it? I tried to add padding:20px; to the <div> that has the text which doesn't work.
<div style="width: 50%; height: 100px; float: left; padding:20px;">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
Use Grid with a media query for smaller screens:
article {
display: grid;
}
div {
padding: 0.5em;
}
img {
width: 100%;
}
#media (min-width: 400px) {
article {
grid-template-columns: 50% 50%;
}
}
<article>
<div>
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem.
Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<img src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
</article>
use box-sizing:border-box, after applying padding, so the padding will be calculated within the width
For more info Reference
<div style="width: 50%; height: 100px; float: left; padding:20px;box-sizing:border-box" >
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div style="margin-left:50%; "><img style=" max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" >
</div>
</div>
The best way to do this is to wrap both <div> inside a flex-box. And adding border-box as value for box-sizing property. You can read more about box-sizing here: Box Sizing and about Flex Box here. Both are pretty useful to placing items side by side.
Here is a sample code.
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
</style>
<body>
<div style="display: flex; flex-direction: row; width: 100%;">
<div style="width: 50%; height: 100px; padding:20px;">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit
egestas
dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum
facilisis.
</p>
</div>
<div style="width: 50%; padding: 20px;">
<img style=" max-width: 100%; height: auto;"
src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" />
</div>
</div>
</body>
</html>
The box-sizing will prevent your image from changing position when adding padding to the div. And flex-box is much better way to position things instead of float as it offers more functionality and can also position things vertically.
Here is another great article related to Flex Box - Must Read.
You can use this example for side by side
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
Using flex makes it really simple to control the layout.
.container {
display: flex;
height: max-content;
gap: 1rem;
}
.flex-item {
flex: 1;
width: 50%;
}
.info {
height: 100px;
padding: 20px;
}
.image {
display: inline-block;
height: 150px;
width: 250px;
padding: 20px;
}
<div class="container">
<div class="flex-item info">
<h2> What We Do</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem.
Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</div>
<div class="flex-item">
<div><img class="image" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
</div>
</div>
</div>
Sorry am very new to HTML and CSS. I am trying to achieve a responsive lading page. I was able to display text on image by changing image style to relative and text style to absolute. However when I try to resize the site to mobile or tablet size the text goes under the second image.
Am not sure if I am doing anything wrong. Kindly advise.
Please advise what's the best approach to display text on image and make the site responsive?
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<img class="bg_image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
<h2 class="Lorem_Headding">Lorem ipsum </h2>
<p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id diam. Tempor orci dapibus ultrices in iaculis nunc sed. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img class="bg_image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
<h2 class="Lorem_Headding">Lorem ipsum </h2>
<p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id diam. Tempor orci dapibus ultrices in iaculis nunc sed. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.</p>
</div>
</div>
</div>
.bg-image {
position: relative;
}
.Lorem_Headding{
position: absolute;
color: rgb(255, 255, 255);
top: 200px;
left: 50px;
width: 100%;
}
.p-text{
color: white;
position: absolute;
top: 250px;
left: 50px;
width: 660px;
}
.p-text does not need the width: 660px;. the div should wrap the text. you can give the margin, padding for the better UI. for the responsive issue you can try using media query for each screen width.
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I'm trying to make a hero style home page for my website but i set the height to a percentage the image disappears. When I use rem or px the image pops up. I want it to be responsive. Is there any way to go about it that im missing?
.main-content {
background: url(/pictures/picture1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
<div class="main-content">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl rhoncus. Mauris augue neque gravida in fermentum et sollicitudin ac orci. Volutpat lacus laoreet
non curabitur gravida arcu ac. Ipsum dolor sit amet consectetur adipiscing elit ut.
</p>
<button class="btn">Read More</button>
</div>
your div inherits it's height from parent.
.main-content {
background: url('https://via.placeholder.com/350');
background-repeat: no-repeat;
background-size: cover;
height:100%;
width: 100%;
}
html,body{
height:100%;}
<div class="main-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl rhoncus. Mauris augue neque gravida in fermentum et sollicitudin ac orci. Volutpat lacus laoreet
non curabitur gravida arcu ac. Ipsum dolor sit amet consectetur adipiscing elit ut.
<button class="btn">Read More</button>
</div>
When I set the .sidebar width to be 100%, it gets smaller than before.
However, when I remove the body's font-size: 1.3rem and toggle the .sidebar's width: 100%, it gets slightly larger.
I know that when we set the font-size to be 1.3rem, .primary-content's horizontal width (if it didn't wrap) should still be the same ratio as the .sidebar's width (if it didn't wrap).
So I'm not sure how flexbox calculates width: 100%
body {
font-size: 1.3rem;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
max-width: 1100px;
margin: 0 auto;
}
.row {
display: flex;
}
.primary-content {
background-color: moccasin;
}
.sidebar {
/* width: 100%; */
padding: 1em;
text-align: center;
color: #fff;
background-color: #136c72;
}
<main class="main container row">
<section class="primary-content">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
Here's the codepen.
https://codepen.io/Fullchee/pen/OJMBovq
It's all about the initial width here. To understand this let's take another simple example with less code:
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
}
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
It's trivial, that the second case seems a bit strange because the width is reduced but this is logical.
First, you should notice that both elements have the same content and the content need to wrap inside each one because there is not enough space.
If we reduce the content it will be different:
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
}
<div class="box">
<div>
Lorem ipsum dolor sit amet,
</div>
<div>
Lorem ipsum dolor sit amet,
</div>
</div>
<div class="box">
<div>
Lorem ipsum dolor sit amet,
</div>
<div style="width:100%;">
Lorem ipsum dolor sit amet,
</div>
</div>
To understand both cases, you need to understand the flexbox algorithm that I will summarize in 3 points:
We first set the initial width of each element
If the total width is bigger that the container width, we shrink both elements
The shrink factor consider the negative free space (total width - container width) and the width of each element.
The trick is in the (1).
Without width:100% we will have the following in (1)
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Both elements have the same width so both will shrink the same way to get the following:
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Now if you make the second element width:100% it will have a smaller initial width
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
The first one is almost 3 times bigger than the second one thus they will not shrink the same way and at the end the second will remain smaller (it will be kept at almost 3 times smaller)
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
Same logic apply to your code!
The same logic also apply when smaller content is used but in this case width:100% can make the initial width of the second item bigger so we end having a bigger element (like in the second snippet above)
Some related questions where you will get more details around the calculation and the flexbox algorithm:
How flexbox calculates flex-item's width if no flex-basis or width are set?
Why is a flex item limited to parent size?
The unpredictable wrapping habits of CSS
In case you want to increase the width of your element you can make the first element to shrink more:
body {
font-size: 1.3rem;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
max-width: 1100px;
margin: 0 auto;
}
.row {
display: flex;
}
.primary-content {
background-color: moccasin;
}
.sidebar {
padding: 1em;
text-align: center;
color: #fff;
background-color: #136c72;
}
<main class="main container row">
<section class="primary-content">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
<main class="main container row">
<section class="primary-content" style="flex-shrink:1.2;">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</aside>
</main>
You can also define flex-shrink for both and make sure it's bigger for the first element:
I have some text in tiny_mce
<div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. U</div>
When I press Enter in editor i get something like this, tiny_mce make 2 divs
<div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit,</div><div> sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. U</div>
I need tag p on press Enter, not new div. Is it solution for this problem?
You may want to check the FAQ. Default behavior seems to be p.
Try this tinymce init setting
forced_root_block: 'p',