I have this sample text in my application : "welcome to stack over flow and welcome again". I am using this text and because of other elements, half of the text is coming down like this:
"welcome to stack over
flow and welcome again"
Now I need to give a space between these two lines.
This can be achieved with the "line-height" property, but it would effect other elements too.
Can anyone help me out?
Thank you.
You can use element specific line-height. So it won't affect other elements.
HTML
<span class="text">
welcome to stack over
flow and welcome again
</div>
CSS
body {
line-height:1; /*Global line height*/
}
.text {
line-height:1.5; /*Element specific line height*/
}
If the text is going to remain same then you can use break or can also use the text in two different tags. But using line-height will be better option as it will work even when text is changed.
Related
I am setting up a simple blog website and need help formatting the posts that are submitted to the front page of the site.
You can achieve this in multiple ways. Maybe the easiest way is to put your text in a container and give this a width. The text will wrap itself.
<div class="text">Your text here</div>
and your CSS. If you want to break within the word you can use word-wrap:break-word;.
.text {
width: 100px;
}
You have many options for this. simple one put you text in a <div> tag and give width to div as much you like.
<div style="width:100px">"Hello, this is my first post. As you can see, it wraps all the way around the text box and into another line."</div>
You should add a word-wrap css property and set it to break-word. This forces the text to wrap inside a container.
.container {
word-wrap: break-word;
}
In my HTML code whenever I use sentence like below :
<p> This is a example sentence </p> or
<h3> This is header Sentence </h3>
It is displaying from extreme left side but I want some space before my sentence starts. For this I am using non breaking space. But it looks very ugly since I need to use 5 to 10 times of non breaking space like this :
I tried to use also but in this case also i need to use 5 times. So what other options i have to make my sentence to start with some spaces??
You can use text-indent property to indent your text inside a p or h3
Alternatively, if you are looking to pad up entire paragraph or header, you should have a wrapper div and use padding or margin for p as well as h3.
But as you said you are using am sure what you are looking for is text-indent.
p.class_name {
text-indent: 20px;
}
Demo
I've edited your question though, as you only used html tag, I have also added a CSS tag, but if you want a HTML solution than take a look at pre tag
Have you tried using margins?
To always indent, use code such as this:
HTML
<p> This is a example sentence </p>
CSS
p{
margin-left:10px;
}
You can use padding for tag by using css like
p{
padding-left:10px;
}
I've got some text and I need it to overflow off the left side of its container (I hide the overflow). Basically, I want it to look like this:
Apparently, you have to you direction: rtl; to do this. Fiddle here.
The problem is that this changes some of the order of the text: hello, world? is displayed as ?hello, world, and 1+2=3 is displayed as 3=1+2.
I've tried playing with the unicode-bidi property, but I can only get that to put things completely right to left.
So, here's the actual question: How can I get text to overflow off the left side of its container without reordering the text?
Try:
text-align:right;
white-space:nowrap;
overflow:visible;
If you have a specific block of text you need to manipulate try the text-indent property with a negative value like so:
text-indent: -20px
This probably won't work for dynamic text though.
You will need to wrap the English text into a span which has direction LTR, and the overflowed text has "inline-flex" like the following:
<div style="direction:rtl;width:150px;overflow:hidden;text-align:right;white-space:nowrap;">
<div style="display:inline-flex">
<span style="direction:ltr;">Hello people, I'm asking: 1+1=2, or what???</span>
</div>
</div>
You will get: http://codepen.io/anon/pen/xKfGa
It is some how complicated, but I think this is the only right way, although it won't display perfectly on IE.
hi all I am new to use css styles,
when i use the below code the complete word is splitting into two words and is moving to next line , I am not getting the complete text in a well paragraphed styles.
<div style="float:left; display:block; word-wrap:break-word; width: 250px">
<asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>
</div>
here i am binding the mail message to label at run time.
How to get the text wrap automatically when content applied to it without splitting the word.
can anyone suggest how to implement this?
thanks in advance
i think you need to remove word-wrap:break-word from your style. That is breaking your words.
Edit to make your text wrap you can set the width of the paragraph or the containing div to a specific size
example:
width: 400px
UPDATE:
<div class="text">
<asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>
</div>
CSS:
div.text {
float:left; width: 250px; white-space: normal;
}
i am not sure how asp renders i am assuming it becomes a tag
div.text label {
display:block; width: 100%;
}
Sounds like you want the white-space property, like:
.myTextClass {
white-space: normal;
}
Update: And judging from the code you just posted, you also probably want to get rid of that word-wrap style.
CSS2 has a number of properties that define how a paragraph of text is laid out:
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-indent Specifies the indentation of the first line in a text-block
It's actually default behavior for text to wrap and be split on whole words. To ensure it does you can set white-space:nowrap, but I'm not sure you need to do that in your case.
The behavior you're describing is most likely caused by the word-wrap:break-word property you have in your code. The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line.
You have defined that long words can simply be broken in half when they don't fit. Removing this rule from the style attribute will give you back the default behavior. If not you can change the rule to word-wrap:normal to be sure.
I'm trying to place normal size text on the same line as a header tag. Doing this put the normal size text on the next line because a header tag is a block element.
<h1>Header</h1>normal size text
Any help is much appreciated.
h1{display:inline;}
Will cause the H1 Tag to stop blocking
Or, if you don't want to use inline elements, float the h1 instead:
h1 {
float:left;
}
In some scenarios may need to wrap both the h1 and normal size text in a div, that's also floated left, to keep it contained on the same line:
<div id="foo"><h1>Hello</h1>World</div>
alternatively, you might want to try
<h1>Header <span class="normal">normal size text</span></h1>
, and style the .normal span using css to look like normal text. not semantic, but visually works even in IE6.