Below is the snippet (JsFiddle)
div::first-line {
font-size: 1.5em;
}
div::first-letter {
font-size: 4em;
}
<div>
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>
As can be seen, the first letter of the text is so large that it overlaps with the second line.
Somehow the line box of the first line doesn't enlarge with its largest element, which is the first letter.
Moreover, these characters are not aligned by the baseline..
Does anyone have any ideas about this? Thanks!
Related
Is there a CSS or HTML way to justify a whole paragraph, but the last line of the paragraph can be aligned to the center, to the left, or to the right?
You are looking for text-align-last.
p {
text-align: justify;
text-align-last: right;
}
<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>
Consider the folowing markup
<div>
<p> text here</p>
</div>
When length of text is small , there is no issue .
When length of text becomes little more , I am able to display the text outside the div with white-space: nowrap CSS property.
However when text becomes huge , some part of the text gets hidden as It moves outside the viewport .Is there a way in which I can display it on the second line when It overflows the whole viewport and not the size of the parent div element.
If you put an inner div around the text within your div you can force that to have width 100vw and set its white-space back to normal.
In this snippet the 'original' (outer) div is given a pink background so you can see its boundaries.
div.outer {
white-space: nowrap;
width: 50%;
background-color: pink;
}
div.inner {
width: 100vw;
white-space: normal;
}
<div class="outer">
<div class="inner">
<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>
<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>
<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>
</div>
</div>
The extra (inner) element is put there to deal with the general case. You might be able to use the p element instead of div.inner - it depends on whether there is other text e.g. outside an inner element in your particular set up.
try
overflow-wrap: break-word;
Or
word-break: break-all;
I'm wondering whether this is just the way that browsers act or whether it's a CSS property that I can change.
Take this simple example I made: https://jsfiddle.net/ogLw3ptj/
HTML:
<div class="box-with-scroll">
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. 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. 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>
CSS:
.box-with-scroll
{
overflow-y: scroll;
width: 200px;
height: 500px;
border: 1px dashed black;
padding: 15px;
}
Repro steps:
(1) Center the scrollbar vertically
(2) Click and hold down the scrollbar
(3) Move mouse directly out to the right
(4) Scrollbar "jumps" to top
I'd like to show a pic, but PrtScn doesn't show mouse pointers :(
Happens in all browsers I've tried in
This is the default behaviour, it repositions the scrollbar to the original location when you move the cursor out of position(there seems to be a rectangle around the scrollbar)
Related info:
Source 1 UX Stackexchange
Source 2 Bug Report Chromium
I am new here. I have a slight problem with this area. I have a background image with a picture at the bottom right and in my PSD, I want to make the text look like this: Original
but currently in my code, it looks like this:Current
As you can see, the text actually flows beneath the div without automatically breaking line. Appreciate if there's any solution to this, thanks in advance!
I have two separate images. One is for the background image (Full cyan background) and another one is the ipad image which is positioned absolute and also positioned to the bottom right of the background image.
HTML:
<section id="ipadsection">
<div class="container fluid bgimage">
<div class="blockoftext">
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.
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.
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.
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 class="ipadimg">
<img src="assets/img/ipad.jpg" alt="ipad">
</div>
</div>
</div>
</section>
CSS:
.bgimage {
background: url('../img/backgroundipad_03.jpg');
height: 400px;
background-size: cover;
position: relative;
}
.blockoftext {
float: left;
text-align: left;
}
.ipadimg {
position: absolute;
bottom: 0px;
right: 0px;
float: right;
margin-bottom: 1px;
width:50%;
}
The main problem with your existing code is the position: absolute you used and that the image element weren't placed correct in the markup.
As the <div class="ipadimg"> div (and its CSS rule) isn't necessary I removed that, moved the img before the last paragraph and added this new rule.
.blockoftext img {
float: right;
}
Stack snippet
.blockoftext {
float: left;
text-align: left;
}
.blockoftext img {
float: right;
}
<div class="blockoftext">
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.
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.
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.
<img src="http://www.placehold.it/300x150" alt="ipad">
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>
Update based on comment
Here is the text splitted into to 2 groups. The down side is that the user, which can edit the text, need to know it has to be splitted so a part of the text will wrap around the image.
Side notes:
I personally would solve this issue by making a text template and then measured the newly edited text and then injected the floated image into it. (can't make a sample how-to though, as I'm not using WordPress)
If users are allowed to edit the text, it might be appropriate to let them change image as well. Their text might say something that is not accurate with the existing one
.blockoftext, .blockoftext-withimg {
float: left;
text-align: left;
}
.img-right {
float: right;
}
<div class="blockoftext">
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.
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>
<div class="blockoftext-withimg">
<img class="img-right" src="http://www.placehold.it/300x150" alt="ipad">
<span class="txt-left">
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.
</span>
</div>
The float property in CSS is all you need to create text that 'wraps around' your image. This creates an image that is positioned within the text-flow of your document, but 'floated' to the left, or to the right.
"Floating" is ignored if you used a specific type of element positioning, like position: absolute. When you use absolute positioning, the picture is actually taken out of the document flow, and placed on a 'layer' of its own - and this is why it's showing on top of your text. In order to get your layout to work, you may need to do the following:
remove the absolute positioning from the picture
do not float the text - place the text as normal inline content.
place the picture within the text, and float it to the right.
You can find out more about floating pictures here:
http://www.w3schools.com/css/css_float.asp
I have in some div long text and I would like to display only 3 lines from the text and when somebody click on the "read more", the whole text should be shown.
How to make this "read more" option in html/css?
One method would be to set the div's height to be three times its line-height, and set overflow: hidden.
You can then change its height to "auto" in the event handler for displaying the rest of the content:
document.querySelector('button').addEventListener('click', function() {
document.querySelector('#content').style.height= 'auto';
this.style.display= 'none';
});
body {
font: 14px verdana;
}
#content {
overflow: hidden;
height: 3.6em;
line-height: 1.2em;
width: 200px;
}
<div id="content">
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>
<button>Read more</button>
You could also do this completely in CSS by using an adjacent sibling selector:
body {
font: 14px verdana;
}
#content {
overflow: hidden;
height: 3.6em;
line-height: 1.2em;
width: 200px;
}
#more:checked + div {
height: auto;
}
<label>
<input id="more" type="checkbox">Read more
<div id="content">
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>
</label>
You can do this by first setting the height of the box to a specific size and keep the overflow hidden. Then use a button and js event to handle this .
<div id = "content">
your test will come here.
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.
<button type="button"
onclick ="document.getElementById('content').style.height='auto'">
Read more
</button>
</div>
Your css file should contain this.
#content {
overflow: hidden;
height: 3em;
line-height: 1em;
}
I was looking for read-more-possibility made only by html and css, too. The best idea for me was that with the adjacent sibling selector.
I changed what you read above in a certain way. First there is normal text. That stops at a senseful point, not counting the lines. Sometimes it can be one line, sometimes 4. After that I can expand it.
In css I wrote the first part, the second in html
body {
font: 20px verdana;
}
.content {
overflow: hidden;
height: 0em;
line-height: 1.2em;
width: 100%;
}
.more:checked + div {
height: auto;
}
<label>
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.<br>
Read more? Click at the box. <input class="more" type="checkbox">
<div class="content">
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.<br>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>
</label>