Is it possible to make text inside a div to fit its DIV while the bowser window is resized?
I read this and this and few other about Fit Text to DIV but none of them gives an accepted answer about fit text when browser window is resized.
<div id="wrapper">
<div class= "tfz">FIT THIS TEXT</div>
</div>
jsFiddle
Try with -
word-wrap: break-word;
and set the width in %. Hope that will fix the problem.
Example
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Style
div {
width: 500px;
word-wrap: break-word;
font-size: 2vw;
}
Check it here
With width given as px, you really cannot resize it, unless you use some javascript/jquery! So if it is really important you to mention width in px you just can achieve it through jquery/javascript.
So if you agree to mention it in % then definitely you can manage it through CSS as below:
#wrapper{
position: relative;//no need to change this
width: 50%;
word-wrap: break-word;//apply this.
height: auto;
}
DEMO
Related
Here is the effect I want
Hey, I am wondering how to position with text and images on same line only by using css? And if this is possible, how to always keep them on the same line when I am resizing the browser or using a different computer? Thank you!
I would use display:flex; for this:
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
#flex{
display:flex; align-items:center; padding:10px;
}
#icon{
width:164px; height:164px;
}
<div id='flex'>
<p id='para'>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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img id='icon' src='https://i.stack.imgur.com/DvKY9.png?s=328&g=1' />
</div>
When I randomize position of some divs with text and some others with images (on load and using setInterval), images always get on the top of the divs with text. I’ve been trying to find a solution by myself but I just started learning how to code a few weeks ago, and I don’t even know what am I looking for. So I’d appreciate if someone could help me. This is my code so far:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title></title>
<style>
div{
position: absolute;
}
.description{
width: 650px;
}
</style>
<script type="text/javascript">
function Init(){
divs = document.querySelectorAll("div");
setInterval (mover, 500);
}
function mover(){
divs.forEach(div => {
var spaceH =window.innerHeight - div.clientHeight;
var spaceW =window.innerWidth - div.clientWidth;
div.style.top=Math.round(Math.random()* spaceH) + "px";
div.style.left=Math.round(Math.random()* spaceW) + "px";
});
}
</script>
</head>
<body onload="Init()">
<div class="description">
"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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="description">
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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div><img src="MyImage1.jpg" class="imagenes" alt=""></div>
<div><img src="MyImage2.jpg" class="imagenes" alt=""></div>
</body>
</html>
I intend to doit with many divs more. This is just a test. And sorry if I’m not explaining myself properly.
If one div is rendered after another, it will overlay the prior div. It doesn't matter if the div contains text or an image. The newer div will still overlay the older div.
Example:
.overlay {
border: 1px solid gray;
width: 80px;
height: 80px;
background: transparent;
padding: 0.2rem;
position: absolute;
color: red;
}
<div class="overlay">
Here is a div with text. Lots and lots.
</div>
<div class="overlay" style="left: 40px; top: 40px">
<img src="https://picsum.photos/80" style="width: 80px; height: 80px">
</div>
<div class="overlay" style="left: 80px; top: 20px">
Here is a div with text. Lots and lots.
</div>
I'm trying to add a dropdown effect to my website but I can't seem to get it right.
I'd like to click on the '+' and let the shape expand to show text, so after I clicked '+', some sort of animation should begin?
I'm new to javascript and I'd like if someone could help me out
http://severinereard.be/test/
Here's the website, I only finished the mobile version so it's best viewed in a thin browser window.
In the first section 'Pelvi-périnéologie' I added a paragraph which I hid with display none.
I hope this is enough information
UPDATE:
I added the javascript and it works for the first section but not for the rest. I'd also like for the dropdown to not go so fast but smooth?
Thanks in advance!
Here's an example of a possible solution. Layout is different, but you'll get the idea.
UPDATE: included javascript to handle the click
const sections = [...document.getElementsByTagName("section")];
sections.map((section) => {
section.addEventListener("click", function() {
const paragraph = this.querySelector("p");
paragraph.style.maxHeight = "100px";
})
})
section {
display: inline-block;
}
section img,
section h3,
section h5 {
display: inline;
}
section p {
max-height: 0;
overflow-y: scroll;
transition: max-height 1s;
width: 300px;
/* for demo purpose */
}
section:hover p {
/*max-height: 100px; to force scrollbar */
}
<section>
<img src="https://via.placeholder.com/40">
<h3>Pelvi-périnéologie</h3>
<h5>+</h5>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
I have multiple items in a div with paragraphs and I would like to truncate them to 2 lines. I have tried to truncate using the height but it results in cut off words. I can't use characters because in some cases the words are long and get pushed to a new line.
I am trying to work with getClientRects() as you'll see in the fiddle below.
Also note that I can't use any plugins for the project I am working on.
I found this example on another post: Working Truncate from stackoverflow post
My Fiddle:
JS Fiddle
var lines = $(".truncate")[0].getClientRects();
var divHeight = 0;
for (var i=0, max = 2; i < max; i++)
divHeight += lines[i].bottom - lines[i].top;
divHeight += i;
$(".truncate").height(divHeight);
There's a number of issues.
The code you're trying to work from takes advantage of a quirk related to display: inline but you don't set display: inline, instead leaving .truncate at the browser default of display: block.
ready isn't a real event and jQuery no longer fakes it when using .on('ready', ...) so your code never runs.
jQuery's .height() requires that the argument be in the form of a CSS height value. This means you need to use something that results in, for example, '50px' rather than just 50.
height is ignored on inline elements so it'll have to be set on the outer element. The code you were working from did this but you didn't follow it.
Your code assumes that the number of lines will always be two or more.
overflow: hidden isn't set so the text itself will push outside its container even if the container was shortened.
All together, your code should look something like this instead:
.item {
width: 400px;
margin: 20px;
display: inline-block;
overflow: hidden;
box-sizing: content-box;
}
.truncate {
display:inline;
}
$(document).ready( function(){
var lines = $(".truncate")[0].getClientRects();
var divHeight = 0;
var max = lines.length >= 2 ? 2 : lines.length;
for (var i=0; i < max; i++) {
divHeight += lines[i].bottom - lines[i].top;
}
divHeight += i;
$(".item").height(divHeight + 'px');
});
JSFiddle
Using the css answer from css-tricks (https://css-tricks.com/line-clampin/) assuming you know the line-height.
.item {
width: 400px;
margin: 20px;
overflow: hidden;
}
.fade {
position: relative;
height: 2.4em; /* exactly two lines */
}
<div class="item fade">
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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="item fade">
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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Here is what I have so far and here is the link to see it online.
p { line-height: 2; }
.highlight { background-color: yellow; }
The goal is to wrap the quoted content like below (no border is necessary but I want the whole background including the space between lines to be colored)
I see that the picture isn't clear but I hope you can figure out the idea.
The current version only highlights the lines and the space between lines(due to line height being taller than 1) is not highlighted.
Is there any way to achieve this either in CSS or in JavaScript?
One way to do this is to give the marked text a top and bottom padding.
p {line-height:2}
mark {padding:.5em 0}
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Hi you can use the span tag and set the background of that span so it will work like
<p>this is the dummy text without any background <span style='background:yellow'> This text with the background colour</span> this text have no background</p>