I'm creating a webpage that produces formatted text, which is then copy&pasted into Microsoft Word 2010. Everything works fine, except I have to support hanging indent. The method I found to produce hanging indent using CSS with margin-left: 1cm; text-indent: -1cm;. This works fine on the page, but doesn't work when copied over to word, as the margin-left part is lost.
Thus, the beginning lines of all paragraphs are shifted left, instead of all others being shifted right.
Example (put into a HTML file, then copy from Firefox to Word):
<div style="margin-left: 1cm; text-indent: -1cm;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum eu nunc ut nunc dictum molestie.
Ut et porttitor leo, at tincidunt neque.
Integer vulputate sed odio nec aliquam.</div>
Edit: Fixed typo
Self-answer, as I figured it out after I'd already written the question.
The key is to use a p tag instead of a div. Then it works, for whatever reason. If you want to test it yourself, check out the demo I've written up.
<p style="margin-left: 1cm; text-indent: -1cm;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum eu nunc ut nunc dictum molestie.
Ut et porttitor leo, at tincidunt neque.
Integer vulputate sed odio nec aliquam.</p>
Related
I don't want to have a line break between my opening parenthesis and my button element.
The problem:
What I would like:
I found only one solution: add display: contents; on the button style, but this makes the button inaccessible.
JS FIDDLE
button {
color: blue;
border: none;
background: none;
padding: 0;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non feugiat elit, quis rhoncus ex. Proin nunc lectus, vehicula a porttitor a, scelerisque quis erat. Sed non orci elit. Phasellus id nisi nunc. Proin et justo pharetra, mattis urna sed, ullamcorper justo. Sed vel ex liber (<button>text in button</button>). Cras a odio non massa sodales imperdiet in non nisi. Fusce eu vulputate urna, sit amet pharetra libero. In accumsan ante a placerat sodales. Maecenas vel ex a diam tempor cursus nec vitae nisi. Fusce ligula mauris, egestas ut hendrerit vel, lacinia sit amet purus. Vivamus maximus eu ante eu convallis.
</p>
A <button> cannot wrap across lines. If there's not enough room for the button on the current line, the entire button will start at the beginning of the next line. A button cannot start on one line and then wrap to the next line. A link can wrap across lines but that's not an appropriate element in this case.
I know you are asking for the left paren '(' to stick with the button but you are essentially asking for the button to wrap, which it can't do.
However, what if the left paren also wrapped to the next line so that it's "paired" with the button? Do you want your text to look like this:
I removed the button styling in your jsfiddle to make it obvious where the button is.
A <button> has a default CSS display of inline-block, which allows it to be inline with the rest of the text but prevents it from splitting across a line. You can apply that same styling to the parentheses too by wrapping them in a <span style="display:inline-block">, essentially making them part of the button text from a wrapping perspective.
<p>
Lorem ipsum... Sed vel ex liber <span style="display:inline-block">(<button>text in button</button>)</span>. Cras a odio non massa...
</p>
I seem to have a problem with the AOS (animate-on-scroll) library in my html page. The code works fine, but the issue is that the last div doesn't run its AOS code (fade-right) until the user is scrolling over it within a certain range of pixels, meaning that if my height is set at "100%", the page will just show a blank space where the div is supposed to be. This is because the content of the last div is too short to actually let the user scroll withing said range. Of course, the code runs fine if I extend the height of the html to a specified value that is longer than the height occupied by the elements in the page, but I really would like to avoid that and just allow this last div to appear without having to add space for the user to scroll just a little bit more. I'll leave a snippet for clarification.
html{
height:100%;
}
body{
overflow-x: hidden;
}
h1{
font-size : 90px;
text-align: center;
}
p{
width:50%;
font-size:20px;
text-align:justify;
margin:auto;
padding:20px;
background-color: #3E9AE0;
}
div{
margin-bottom:50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-left" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init({
mirror:false,
});
</script>
</body>
</html>
After a little bit of tampering with the code, I may have found a solution to this specific case. Setting the height for the html tag, in CSS, to the attribute "fit-content" seems to do the trick just fine, for pages that are simply structured such as mine. You may want to try something else if you have positioned your elements in a particular way near the end of the page. Here's the (very brief) code needed for this solution, to type in your CSS file:
html{height:fit-content;}
As a (most likely irrelevant) side-note: this attribute is not supported in Internet Explorer.
This question already has answers here:
Chrome on Android resizes font
(7 answers)
Closed 6 years ago.
I found a strange Chrome “feature” I don't understand. When using fieldset with responsive design, the text within the fieldset would sometimes appear much bigger compared to the other contents of the page.
When I remove a few characters from the text, it suddenly takes the same size as any other block on the page.
For instance, the following page is generated by Chromium 49 using Device mode. The display is very similar on an Android smartphone running Chrome. Firefox in responsive design mode doesn't have the glitch.
This is the corresponding code. There are no external CSS files.
<html>
<head>
<style>
body{font-size:.8em;}
</style>
<body>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta sus
cipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue condimen
tum orci, id vulputate nisl mauris non mas.
</p>
<fieldset>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
suscipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non mas.
</p>
</fieldset>
<fieldset>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta
suscipit ultricies.
Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.
Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond
imentum orci, id vulputate nisl mauris non ma.
</p>
</fieldset>
</div>
</body>
</html>
In this piece of code, the first <p> of the page and the one inside the first <fieldset> contain the same text. The paragraph in the second <fieldset> contains one character less.
What is happening?
Note that an ugly workaround consists of specifying fieldset{font-size:.999em;} in the styles. It makes all three paragraphs appear similar. This being said, I'm more interested about the origin of this feature/glitch rather than a workaround/hack.
I discovered that this behavior is by design.
In order to prevent Chrome on Android or Chromium in Device mode to adjust the font size depending on the content of a block, the following meta element should be added:
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: Joe DeRose's answer to a similar question.
Further reading: Using the viewport meta tag to control layout on mobile browsers at MDN.
I've been trying to use css to fill the last line of a paragraph with dashes but i can't seem to find a way to do so.
Basically, i'm getting some data (text) from the database and output it to a paragraph but i don't know how much text it is nor do i know the size of the parent div.
With all of this in mind, I need to fill the remaining space in the last line of the paragraph with dashes.
For example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.----------------------------------------------------------------------------------------------------------------
I've tried using some css codes i found but i couldn't adapt them to my situation some used display:flex (i think?) others were basically a lot of dashes and overflow:hidden which doesn't work because it hides everything on my paragraph after the first line.
Try
p {
position: relative;
overflow: hidden;
width: 100%;
}
p:after,
p::after {
content: "----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
display: inline-block;
width: 100%;
height: auto;
z-index: -1;
position: absolute;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.</p>
Instead of dashes, you can use the hr tag. It does not need a closing tag.
Example of the hr tag:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu malesuada lacus, in aliquam diam. Sed feugiat, leo tempor maximus accumsan, erat mi elementum nisi, quis vehicula nunc nibh in nibh.
I am trying to get my text to align. I have a <p> and my text goes all the way from the left of the webbrowser/screen till the right. But I want it to be away from the left and right ends of the screen. I know of the alignment code "center, right, left, etc.". I need it to be left aligned, but not right next to the screen, like if the whole <p> was indented on both sides.
You would want to either put it within a containing div, or apply padding to the <p> tag. It would look like this:
.container {
width: 80%;
margin: 0 auto;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>
</div>
OR
<p style="padding:0 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>
You can simply add some padding, margin-left/margin-right, or another solution like that.
Try adding;
text-align: left;
margin-left: 5%;
to your CSS.
You can change the margin-left value to be an amount of pixels (e.g. 50px;) or leave it as percentage of it's parent element.
You said you wanted the text left aligned but not have it touch the left side of the page. Here is a JSFiddle of that:
https://jsfiddle.net/zfvhgr0x/
you can do this simply by keeping the width attribute as is and just including the following into your CSS:
padding: 0 5px;
This will add a space of 5 pixels to the left of your text, and the right of your text. This means that if your text would reach the end of the screen, it would stop 5 pixels before the end.
You can set each indent individually, as explained below:
padding: 5px(top) 7px(right) 2px(bottom) 10px(left)
When putting this in code, you do not want the brackets. These are just there for demonstration purposes to explain what each of the numbers will target.
Hope that helps!