I am creating a multilingual website where the plugin in I am using only provides the option to show the language name entirely. I want to limit the character count to only 3 characters. Example: If the language is English I only want to display it as ENG, When it's Vietnamese it will be VIE.
I already tried
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px;
display: inline-block;
text-transform: uppercase;
font-size: 15px;
}
<p>
<span>English</span>
</p>
<p>
<span>Vietnamese</span>
</p>
I don't want the ... appear with the first three letters and setting a width or max-width is not effective to show only 3 characters in some languages as you see in the above snippet. Is there are any alternative approaches there? Let me know, please.
that ? with font-family:monospace;
span {
font-size : 30px;
display : inline-block;
width : 3ch;
font-family : monospace;
overflow : hidden;
text-transform : uppercase;
}
<p>
<span>English</span>
</p>
<p>
<span>Vietnamese</span>
</p>
Related
I have an issue while using custom font(poppins-regular.ttf). The issue is when I set background-color for span tag which is wrapper of text.
The words like g,y,.. etc got cut at the bottom. But, If I change the font-family from poppinsRegular to tahoma it looks good.
But the real issue here is i need to maintain same line-height
.passageBody, .passageBody2 {
width: 414px;
padding: 10px 0;
margin: 0px;
font-size: 24px;
line-height: 32px;
font-family: 'Poppins', sans-serif;
}
.passageBody2 {
font-family: tahoma;
}
.highlightPhrase {
background-color: yellow;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="passageBody">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
<hr/>
<div class="passageBody2">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
Example jsFiddle link here...
You can either remove the line-height property or try to set it in em units.
line-height: 1.5em;
Edit 1
If you don't want to change line-height, use vertical align with inline display
.highlightPhrase {
background-color: yellow;
display: inline;
vertical-align: text-bottom;
}
Edit 2
The above code might have visually changed the line height. So this example might be an elegant solution to your problem. Just wrap the content in another element and set the position to relative, so that background of each line will not hide the above line.
.highlightPhrase span {
position:relative;
}
or you can use some small image as background and repeat it to highlight entire text.
Problem here is the vertical placement of the glyphs.
Designer decided to set the font glyphs like that.
So, basically designer decided how much space there is below the baseline, and how much space is above the height of uppercase letters. Typically these spaces are equal, but they don't need to be.
I think that only solution for you is to put bigger line-height on the paragraph that is using that font or just choose a different font.
Change:
line-height: 32px; to line-height: auto;
Try this
.highlightPhrase {
padding:5px;
}
I need to get elipsis to work for a paragraph, but when I change the height from height:2.5em; to height:1.25em;, the elipsis go away.
.a {
font-size: 13px;
display: block;
width: 100%;
height: 2.5em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: normal;
margin-bottom: 10px;
}
.b {
height:1.25em !important;
}
<p class="a">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
<p class="a b">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
By decreasing the height, you decreased the number of lines that can be shown. So you have to decrease the -webkit-line-clamp value to match the maximum number of lines. In this case, it is 1:
.a {
font-size: 13px;
display: block;
width: 100%;
height: 1.25em;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: normal;
margin-bottom: 10px;
}
<p class="a">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
The problem is that you have -webkit-line-clamp set to 2. You will need to change that to 1.
Keep in mind that this method is quite fragile and will break if you add padding to your anchor and may be hard to maintain in different viewports.
There are several important things you should consider here.
First you can set a line-height. Then you will want to multiply each line-clamp times the line-height, and set that value to max-height.
For example:
max-height = (line-height)(-webkit-line-clamp)
max-height = (13px)(2)
max-height = 26px
.a {
font-size: 13px;
line-height: 13px;
max-height: 13px;
display: block;
width: 100%;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: normal;
margin-bottom: 10px;
}
<p class="a">
This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and
researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
two CSS settings :
h6 {
font-size: 18px;
color: #000;
font-weight: 400;
letter-spacing: 0.05em;
}
h6red{
font-size: 18px;
color: #ff0000;
font-weight: 400;
white-space: nowrap;
}
<h6red>LE CHIC</h6red><h6> jouw partner in kleur</h6>
The output is on two lines, can i prevent this?
Thanks in advance
Erwin
<h6red> isn't valid markup. But what you're looking for is display. Add display:inline-block; to both of the above and they will stay on one line.
As mentioned by Marc Audet, <h6red> isn't valid HTML and therefore we shoud start there. Header tags are <h1>,<h2>,<h3>,<h4>,<h5> and <h6> with no other variations other than the number change. the smaller the number, the larger the text gets. Anything else wont be properly read by the browser as a heading.
With that being said, here's what I'd do.
Using a <span> tag, you could isolate(or 'wrap') one word within a sentence and decorate the<span> in CSS. This would keep the text inline while adding the style. My recommendation would be use a classname on the <span> to allow its use for different things later, unless you only plan to use it once. I would suggest:
<h6>
<span class="makeRed">LE CHIC</span>jouw partner in kleur
</h6>
along with this CSS:
h6{
font-size: 18px;
color: #000;
font-weight: 400;
letter-spacing: 0.05em;
}
.makeRed{
color: #f39999;
}
I have a heading (<h1>) that has a sort of tagline below it. (I used a <small> tag and set font-size to a certain percent so it lines up perfectly when I change font-size of the heading for smaller screens. I'm using em units, if that matters.)
At first, the <small> tag sat nicely underneath the main heading, but I realized I forgot the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the spacing was all wrong.
Here's my code:
HTML:
<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }
And here's the before and after:
I have searched through StackOverflow, but I'm not sure how to proceed. I've read that a <br /> tag simply line breaks, but it inherits the line-spacing, and line-spacing: (value) does not work, nor do margins or padding.
What I need is a simple, cross-browser solution. I used Chrome for the screenshot. Support for IE6-7 is not needed, though support for IE8 would be nice.
The problem is caused by the default line height for the heading element. The default depends on the browser and on the font, but it tends to be about 1.1 to 1.3 times the font size. In any case, with a very large font size set, this creates a problem, because the line height value also sets the height of the second line. By CSS specifications, for a block element, line-height sets the minimum height of line boxes.
There are various ways around this. Setting display: block on the small element is one way, since then its default line height will be determined according to its own font size. Another way is to set a line height that is considerably smaller than the font size, e.g.
h1.banner { line-height: 0.5; }
You need to control the line-height css property (see W3 Schools) to make sure all browsers set the same height for each line.
It's actually advisable to do this to pretty much all elements containing text, which is why most people use CSS resets for production, which sets a default line-height across all elements.
In this case, the <span> and <h1> will likely have different line heights.
I'm sure the <br /> tag is doing nothing wrong, unless you've altered its properties with CSS which I would not advise.
There's also a shorthand version in case you're setting other font properties for the same element(s):
font: <font weight> <font size>/<line height> <font face>;
For example:
font: bold 12px/18px sans-serif;
Hope this helps.
Drop the <br /> and set the display of the <small> element to block.
http://cssdeck.com/labs/uoqfo4xw
<h1 class="banner">Justin Wilson <small>WEB + GRAPHIC DESIGNER</small></h1>
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100;
display: block; }
An alternative is to set the span to display: block; and then adjust the line-height of the <h2> tag.
I would do this, instead of using a <br /> tag.
Ultimately the answer that works as the best solution is found here (3rd example):
http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head
#cimmanon posted a very helpful solution, but to be safe, I'll stick with what Steve Faulkner said about this being a more semantic and SEO-friendly solution over using an <h1> tag and <h2> tag for a subheading, or inline elements inside a heading tag, regardless of styling.
Here's the solution:
HTML:
<header>
<h1 class="banner">Justin Wilson</h1>
<p>WEB + GRAPHIC DESIGNER</p>
</header>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd;
font-weight: normal;
margin: 1em 0 0 0;/*purely for display purposes, really*/ }
header > p {font-family: Helvetica, sans-serif;
font-size: 1.75em;
color: #888;
letter-spacing: 1px;
font-weight: 100;
text-align: center;
margin:0; }
And the live demo (might not look good to you without the free Arvil font, from Lost Fonts).
http://cssdeck.com/labs/xysgkffs
Thanks for all the answers thus far.
UPDATED....
Change <small> to <p> in HTML and CSS and add line to the h1.banner > p
margin: 0 auto;
FIDDLE
I've got some words like WORD and REALLYLONGWORD. Both have light font and I want them to become bold on mouse over. Both have float: left; width: auto;. I can't give them fixed width.
The problem is when I hover WORD, the REALLYLONGWORD jumps to the right because WORD gets bolder font (and larger width value). Is there any CSS-only workaround to that?
EDIT (I can't answer my own question, so I'm posting answer below):
I found some CSS-only solution. HTML:
<div class="thtitled-thtitle"><div class="thtitles-title">WORD</div><div class="thtitles-titlebold">WORD</div></div>
<div class="thtitled-thtitle"><div class="thtitles-title">REALLYLONGWORD</div><div class="thtitles-titlebold">REALLYLONGWORD</div></div>
CSS:
.thtitled-thtitle { float: left; }
.thtitles-titlebold { visibility: hidden; color: #F5F5F5; cursor: pointer; float: left; font-family: 'BOLDFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; }
.thtitles-title { color: #F5F5F5; cursor: pointer; font-family: 'LIGHTFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; position: absolute; }
.thtitles-title:hover { font-family: 'BOLDFONT',Arial,sans-serif; }
Basically, I create one more hidden container with BOLD font (its width is main width) and put LIGHT font inside. After hover it still has width of BOLD word so there is no jumping.
You do not want to add any width to fonts at all, I suggest you delete the width property competely. (I also hope you noticed the writing error in your css, with should be width)
The next thing is assign a class to the the ahref this can be easily done with SPAN tags
once done in the css just do:
.firstlinkclass{
font-weight: bold;
}
Use letter spacing. For example {letter-spacing:0.04em}
If you style your WORD with enough letter spacing to make it the same overall width as the same word when it is bold, and remove the letter spacing when it is bold, everything else will stay put.
It works - try this (this just demos the concept - not what I'm recommending for production):
<b>Rotterdam</b><br>
<span style="letter-spacing:0.04em">Rotterdam</span><br/>
<b>and</b><br>
<span style="letter-spacing:0.04em">and</span><br/>
<b>Oslo</b><br>
<span style="letter-spacing:0.04em">Oslo</span><br/>
<b>letter</b><br>
<span style="letter-spacing:0.04em">letter</span><br/>
I know this was asked a long long time ago, but I just came up with a solution to fix the jump that works well so I thought I'd share.
Instead of making the font bold on hover, make it have a text-shadow. No jump, same effect, one line of CSS.