i want to display text where text begins first line for second line also, but it is going left side under numbers pls help
1 Text line paragraph and and and and and and and
and and and and and
2 Text line paragraph and and and and and and and
and and and and and
3 Text line paragraph and and and and and and and
and and and and and
Note: without using list class i want this type of display text with css please help.
I assume you mean that for text consisting of numbered items where the numbers are part of the content, each item should start on a new line and the second and subsequent lines of an item should be left-aligned to the same point where the text proper (after number, period, and space) of the first line starts. I also assume that “without using list class” means that the element for a numbered list, ol, must not be used, for some reason.
The simplest (and most robust) solution is then to use a table. Example:
<style>
table.list { border-collapse: collapse; }
table.list td { padding: 0; vertical-align: top; }
table.list td:first-child { text-align: right; padding-right: 0.25em; }
</style>
<table class=list>
<tr><td>1.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
<tr><td>2.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
<tr><td>3.</td><td>Text line paragraph and and and and and and and and and and and and</td></tr>
</table>
If you need avoid using table markup, then you need to simulate it somehow, e.g. using div and span markup and CSS table formatting (display: table etc.) – works in modern browsers, but not in old versions of IE.
Live Demo
If it's just the indentation you are after you could just do this:
p {
padding-left: 1em;
text-indent: -0.75em;
}
Depending on font you may have to adjust the text-indent value a bit.
http://jsfiddle.net/h7KvC/
Use text-indent and clear both in css hope it will solve your issue.
Make a ol out of it..
<ol>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ol>
Result :
Text line paragraph and and
and and and and and and and and and and
Text line paragraph and and
and and and and and and and and and and
Text line paragraph and and
and and and and and and and and and and
You can make paragraphs into list items in this way:
HTML
<div class="list">
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>
</div>
CSS
.list {
counter-reset: pcount;
}
.list p:before {
counter-increment: pcount;
content: counter(pcount, decimal) ' ';
}
Result
1 Paragraph one
2 Paragraph two
3 Paragraph three
http://jsfiddle.net/bQWau/1/
Related
Hello i searched since hours i don't know i maybe missing something but i can't wrapp my head around that i need 2 colums one is generated via inserted content by css and the other should be the normal content text but i simply don't get it.
i want to create a custom list so i need exactly the Behavior of a
<ul><li></li></ul>
<div class="flex-container">
Long Text is Here Long Text is Here Long Text is Here Long Text is
Here Long Text is Here Long Text is Here Long Text is Here Long Text is
Here Long Text is Here Long Text is Here This long Text Schould be
<strong class="no-wrap">Importent: </strong>
<strong class="no-wrap"> All in One single line </strong>
i only need one colum for the before tag it should not wrap the text nodes
before and after the strong nodes i need a 2 colum layout one col for the
before css attr and one col for the rest of the text ignoring the strong
</div>
#import "compass/css3";
.flex-container:before {
counter-increment: h22;
content: counter(h22) ". ";
min-width: 0.8cm;
}
.flex-container{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
}
.no-wrap{
flex-shrink: 0;
}
it should look like this:
Long Text is Here Long Text is Here Long Text is Here Long Text is
Here Long Text is Here Long Text is Here Long Text is Here Long Text is
Here Long Text is Here Long Text is Here This long Text Schould be
Importent: All in One single line
i only need one colum for the before tag it should not wrap the text nodes
before and after the strong nodes i need a 2 colum layout one col for the
before css attr and one col for the rest of the text ignoring the strong
https://codepen.io/frank-dspeed/pen/KJMRwG
Since i don't got valuable answers in time i will now answer it my self i found the solution with some experiments took me only some hours because i am not familar with such situations.
body { counter-reset: h21 h22 h23; }
.flex-container:before {
counter-increment: h22;
content: counter(h22) ". ";
min-width: 0.8cm;
margin-left: -0.8cm;
position: absolute;
}
.flex-container {
position: relative;
padding-left: 0.8cm;
font-size: 11pt;
font-weight: normal;
margin: 0px;
padding-bottom: 11pt;
/*disabled by me because if we choose flex this can't render right as it treats tags as cols*/
}
https://codepen.io/frank-dspeed/pen/xMOagZ
In a Joomla (3.6.5) article I have an image with style: float:left, with several h3 headings, each followed by some plain paragraph text.
Depending on the viewing screen width, which varies a lot, sometimes one of the h3 headings lines up at the bottom of, but still to the right of, the image and the following paragraph is underneath the image on the left. (see mockups)
What I am trying to achieve is to keep the h3 heading with the following first paragraph in the same way as MS Word's "keep with next" function.
I have no special CSS for this article and am not using ul or ol lists. There is only one column and one page, so page-break-avoid is not relevant. It is not a page-break issue.
I have tried wrapping the h3 and associated p tags in a container, but that makes no difference.
Image 1: current text wrapping
Image 2: the 'keep with next' text wrap I am wanting to achieve:
For what it's worth, the code is just:
<h3 style="margin-top: 0; line-height: 30px;">
<img src="images/image-file.jpg" alt="alt text" style="margin-right: 15px; margin-bottom: 5px; float: left;" />h3 heading
</h3>
<p>Some text<br />Some more text</p>
<h3>Another h3 heading</h3>
<p>The quick brown fox jumps over the lazy dog</p>
</h3>
<h3>Third h3 heading</h3>
<p>Last bit of text. Would like to keep previous h3 heading with this first line when wrapping around images</p>
Any suggestions gratefully received.
You are heading in the right direction by wrapping the <h3> and the associated <p> tags in a container, but rather than floating the images left, float these containers right.
It can be solved with a media query. It's not a general solution, but you can do it with an inline css something like this.
<style>
#media (max-width: "500px"){ //Change it accordingly, whenever that break between h3 and p occurs
h3.yourclass{clear: left;} //Assign a class to that h3 or select it with nth-child selector
}
</style>
I have text in spans which is wrapping strangely. Ive worked out that if I indent the html it fixed the issue.
This is fine:
<div class="value">
<span>56959 bqCYXFYS</span>
<span>MBIaLbJm</span>
<span>SW6 6PN</span>
</div>
This is not:
<div class="value"><span>56959 bqCYXFYS</span><span>MBIaLbJm</span><span>SW6 6PN</span></div>
This CSS is just for illustrative purposes:
.value {
background: grey;
}
span:first-of-type {
color: red;
}
span:nth-of-type(2) {
color: green;
}
span:nth-of-type(3) {
color: gold;
}
In the screenshots below ive manually shrunk div.value to make the text wrap. The top screenshots of the indented code is correct, and the 2nd screenshots of unindented code are wrapping in the strange way that I need to prevent.
How can I solve this with CSS only? I cant change the HTML structure at all.
Unindented code example: http://jsfiddle.net/67u7d/7/
Indented code example: http://jsfiddle.net/67u7d/6/
Wrapping occurs when there's whitspace, but since you do not have whitespace (even newline and tabs) between your spans, it's all one "word" that will not break.
As far as breaking, these are identical:
<div class="value"><span>56959 bqCYXFYS</span><span>MBIaLbJm</span><span>SW6 6PN</span></div>
<div class="value">56959 bqCYXFYSMBIaLbJmSW6 6PN</div>
To solve it and keep your spans as true inline elements, you can add a space after the spans using a :after pseudo element:
span:after {content:' ';}
Here's your new fiddle: http://jsfiddle.net/rgthree/67u7d/9/
If you add display: inline-block to your span tag, it will wrap correctly.
I have text which has to be right aligned, and when this text takes up more than one line and wraps around, that new line has to be distinguishable from the line after, so I'm trying to get it to indent on the right side, but I can't find a solution which works.
I've tried what was suggested on [the htmlhelp forums thread #8327] and [codingforums thread #58451] as well as a combination of the two to no avail (Can't post links. Sorry.). Is there any other way of accomplishing this?
My attempts:
div.poem li:after
{
content: " ";
display: inline-block;
width: 10px;
}
Does something, but I don't want it to indent if the text only takes up one line.
div.poem li::first-line::after
{
content: "asdf";
}
Does nothing
div.poem li:first-line
{
color: red;
margin-right: 200px;
padding-right: 200px;
}
Text on the first line turns red (so that I know what's going on) but the margin and padding doesn't do anything.
HTML:
<div class='poem'>
<ul class='poem'>
<li>Here's one line of the poem</li>
<li>This is the second line of the same stanza, which is long and will wrap around</li>
<li>Part of the line above is now on line 3, and looks like it's supposed to be a line of its own.</li>
</ul>
</div>
Here you go:
p {direction:rtl;padding-right:100px;text-indent:-100px;}
This sets the css direction to be from right to left.
Then add right padding to indent the whole thing from the right
Then use a negative indent that causes the first line to be "outdented"
Your content and text-flow is still left to right (i.e. breaks on the right), it just interprets the css (e.g. paragraph text-indent) on the other side.
Here's my code:
http://jsbin.com/ukese5/7
I found an examples here, where it is explained how to create a left indented list of links. It only seems to work on left aligned text though since the method includes using text-indent. In your case (left-aligned) it would look like this:
div.poem li { padding-left: 2em; text-indent: -1em; }
div.poem { text-align: right; }
I tried right aligning it but that didn't work. Is the text being read from Right-To-Left? In that case this should work:
div.poem li { padding-left: 2em; text-indent: -1em; }
div.poem { direction: rtl; }
I assumed his HTML markup:
<div class="poem">
<ul>
<li>This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.</li>
</ul>
</div>
Updated answer based on the your <li> structure:
div.poem li:nth-child(3) { padding-right: 2em; }
div.poem { text-align: right; }
Please note that these are CSS3 selectors and that much older browsers don't support :nth-child(). Since the reading of the english text still works you can use that solution also. To learn more you visit the specification page.
Another thought: If you create these <li> using code, you can add a class on the <li> that you want indented. And then use more browser friendly CSS to indent it.
The only thing left is to sort out if you want the bullet points or not. Those can be taken away with:
div.poem ul { list-style: none; }
OK, I have a list (<ul>) then inside each <li> element I have an <a...>
Here are all the applicable CSS items to the <a> tag
.search_area li a {
font-size:11px;
}
sResCntr li {
list-style-type:none;
}
body {
font-family:Arial;
}
Everything looked great, until I put that font-size:11px in there. The problem is that the hyperlinks wrap to multiple lines within the list (which is fine). But when I decrease the font-size, the last line of the hyperlink always has a larger gap between it and the line above it than the other lines. All the other lines look good, but the last line looks like it is 1.5 spaced or something. I have adjusted the line-height property, but always the last line is larger than the rest.
If you need a demo to look at to see what I mean, I can arrange it when I get home.
here is some HTML:
<ul class="sResCntr">
<li>
<a id="blah" value="6048" href="blah blah"> This is some text that is really long. In fact so long it goes to multiple lines.
</a>
</li>
<li class="alt">
<a id="blah 2" value="5946" href="blah blah"> some more super long text which will wrap to multiple lines. In fact, hopefully, so long that it wraps to at least 3 lines in whatever container you put it
</a>
</li>
</ul
Of course, that has to be in a container which is fairly narrow (mine is 150px if I remember)
That's because of the line height. The line height is normally calculated based on all the characters on the line. The 1st line has the larger line height and the 2nd line has the smaller line height where it wraps. You might have to specify a fixed line height your link:
.search_area li a {
font-size:11px;
line-height:14px; /* matching the other lines */
}
Alternatively you could put a character after your hyperlink so when it wraps the 2nd line will get the line height of the characters outside the hyperlink. Something like this:
<li>Some Text <a href='#'>Your Link</a> </li>
Edit from OP:
This answer led me to try the following which worked perfectly:
I added the following to my CSS:
.search_area li
{
line-height:0px;
padding:5px;
background-color:#F3F3F3;
}
While there is no text in the li, outside of the hyperlink, the line-height of the li, was still messing me up. By getting rid of it, the hyperlink is allowed to determine the spacing.
The font-size / line-height of the parent (<li>) is being applied to the last line (of <a>, because <a>'s default display style is inline.)
Setting the display style of <a> to block works for me.
.search_area li a {
font-size: 11px;
display: block;
}