I don't want word wrap but this is being. I have set width more than text length but this is still breaking so how can I stop word break.
css
.menu{
float:left;
width:120px;
height:34px;
padding:12px 6px 0 6px;
color:#cc8d50;
}
Try:
.menu{
white-space: nowrap;
...
Add that to your CSS.
In your css insert this:
white-space:nowrap;
Related
Fist of all, pls see this Question and the Demo
You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?
I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.
You can reduce the height's lines of paragraphs with the line-height property:
* {
margin:0px !important;
padding:0px !important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
}
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>
Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.
this is happening becuase both <p> contains different font-size.. you can fixed them by using line-height property.
Add the line-height in the CSS. you use 32px font-size on another p element.
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Can you try using margin-bottom:0 for <p>.
Just keep font-size same for both or like mentioned above use line-height and play with it until you are satisfied.
demo:
Jsfiddle
or
Jsfiddle2
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px from the .di_h_en{your-styles-here}
w3schools.com/cssref/css3_pr_text-overflow.asp
How can I create a div and have the text in it wrap normally but only up to a certain line (e.g. the second line), and from then on have the text-overflow: ellipsis property come into effect and hide the remaining text in that div as in the above link?
Personally I use the Trunk8 plugin which does exactly what you want. Have a look at the demo
For example in your case with the plugin you'd use:
$('#div').trunk8({
lines: 2
});
Plugin Link
For a pure CSS workaround and since text-overflow is not intended to multi-line text you may use a hack if you have fixed width and line-height for your text container and control where your text should start hiding.
CSS for simulating text-overflow:
div{
width:55%;
padding:20px;
line-height:20px;
height:20px; /*for showing 2 lines of text*/
overflow:hidden;
position:relative;
}
div:after{
content:"...";
position:absolute;
bottom:0;
right:10px;
}
See this demo: http://jsfiddle.net/kfJAy/
There is no css for what you want to do, but a possible workaround is this:
.ellipsis{
line-height: 10px; //10px for easy multiplication
height: 30px; //line-height * n
text-overflow: ellipsis;
}
I am trying to center text that has a line going through the entire background. On either side of the text, there is some padding, where you cannot see the line at all. I am stumped as far as a good css-only way to go about this. Here is a jsfiddle that is obviously wrong, but its a start: http://jsfiddle.net/gtspk/
HTML
<span class="line">
<h2>Latest Track</h2>
</span>
CSS
.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}
The problem here is that I DO NOT want to specify a width, because I will be reusing this for different headers (with different amounts of text). What is the best way to go about this via css?
UPDATE: HEre is a way to do it, but inline-block has fairly lousy browser support: http://jsfiddle.net/gtspk/3/
Here you go. Had to add a wrapping span (necessary so we can set the background to white so the line doesn't hit the text)
http://jsfiddle.net/gtspk/9/
<span class="line">
<h2><span>Latest Track</span></h2>
</span>
.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}
Right, sorry, misunderstood what you meant by padding. Fixed.
I've currently got a div tag with several text rules set, p, h1, h2... etc etc.
I'm wondering is there anyway I can make it so that one of these rules will not go onto the next line down if the text becomes too long for the width of the div and instead, the text which runs off the div not being displayed in the browser?
So, for example, my p tag is normal, if the line of text gets too long it will simply overflow onto the next line down, same with my h1 and h2 but I want my h3 to only ever take up one line and to never take up more than one, even if that means some of the text getting chopped off at the edge of the div.
HTML
<div id="box">
<h1>This is the first header and this will overflow onto the next line when it gets too long.</h1>
<h2>This is the second header and this will overflow onto the next line when it gets too long..</h2>
<p>This is the paragraph and this will overflow onto the next line when it gets too long.</p>
<h3>This is the third header and I do not want this to overflow when it gets too long... But it does :(</h3>
</div>
CSS
#box {
position:absolute;
width:540px;
height:auto;
left:80px;
top:0px;
padding-bottom:20px;
background-color:#000000;
}
#box h1{
font-family:Ebrima;
font-size:22px;
font-weight:normal;
text-decoration:underline;
text-align:center;
margin-bottom:10px;
color:pink;
}
#box h2{
font-family:Ebrima;
font-size:20px;
font-weight:normal;
font-style:italic;
text-align:center;
margin-bottom:15px;
color:lightyellow;
}
#box h3{
font-family:Ebrima;
font-size:14px;
font-weight:bold;
text-align:center;
margin-top:10px;
margin-left:25px;
margin-right:25px;
color:lightgreen;
overflow:hidden;
}
#box p{
font-family:Ebrima;
font-size:16px;
font-weight:lighter;
text-align:justify;
margin-left:25px;
margin-right:25px;
color:lightblue;
}
I also made a JSfiddle to help.
I have tried adding overflow:hidden; to the h3 rule and that worked in firefox but not in IE, Opera, Chrome or Safari.
I've also tried text-overflow:hidden; and textoverflow-hidden because for some reason I thought those might work but they didn't in any of the browsers.
Should any of those have worked properly or are there other ways I can achieve this?
white-space: nowrap;
overflow: hidden;
should do it (in ie8 and up at least)
*edit Just double-checked and it shoudl be ok in older ie too http://reference.sitepoint.com/css/white-space
You need to specify a height in order for overflow: hidden to work as you expect.
Use the following rules:
overflow: hidden;
white-space: nowrap;
Note that nowrap doesn't have a hyphen.
text-overflow: clip
this should help. Read here: https://developer.mozilla.org/en/CSS/text-overflow
textarea gives an image scroll in IE... is there any way to avoid that?
Add following style and check agian
.textarea{
width:100px;
height:50px;
scroll:auto;
}
Edited Sorry this should be as follows
textarea{
width:100px;
height:50px;
scroll:auto;
}
try
textarea {
resize: none;
}