I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.
Related
Is it possible to truncate one specific inner span of a label, that contains multiple span elements, so that the label in total does not overflow into the next line?
I have prepared a JSFiddle for it on https://jsfiddle.net/keltik/k18892xe/3/, but for completeness I will also supply a part of the HTML/CSS here:
<html>
<body>
<div class="container">
<!-- First Spectre Accordion -->
<div class="container">
<div class="accordion">
<input id="accordion-1" name="accordion-radio" type="checkbox" hidden="">
<label class="accordion-header c-hand" for="accordion-1">
<i class="fas fa-angle-down"></i>
<span class="headline">some headline that needs to be truncated1, so that everything in the parent 'label' element remains in one line</span>
<span class="spacer"></span>
<span class="date">dont truncate me1</span>
</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item">Element 1</li>
<li class="menu-item">Element 2</li>
<li class="menu-item">Element 3</li>
</ul>
</div>
</div>
<!-- more accordions, same structure -->
</body>
</html>
The CSS file is like this, on my development machine I am using Scss though:
.container {
max-width: 400px;
}
I am using the spectre.css framework and it is already included in the aforementioned JSFiddle link.
I have already tried out these approaches, but could not get any of them working with label, multiple span elements and the specific spectre.css classes:
https://scottwhittaker.net/flexbox/2017/02/05/flexbox-and-text-truncation.html
https://westerndevs.com/css/Using-Overflow-Ellipsis-in-Inline-Flex/
How to use "text-overflow: ellipsis" with a label element?
I am looking for approaches using HTML/CSS without Javascript, if it is possible.
I would appreciate your help.
You can try the use of white-space:nowrap and flexbox like this:
label {
display: flex;
max-width: 400px;
border: 1px solid;
overflow: hidden;
}
label > span {
white-space: nowrap;
flex-shrink: 0; /*This span will never shrink*/
margin: 0 5px;
}
span.tru {
flex-shrink: 1;/*allow this one to shrink*/
/*Hide the overflow*/
overflow: hidden;
text-overflow: ellipsis;
}
<label>
<span>lorem don't truncate</span>
<span class="tru"> truncate me truncate me truncate me truncate me truncate me v truncate me truncate me truncate me</span>
<span>don't truncate me</span>
</label>
I want to increase C and I . I also use ::first-text{}. It works Now, how can i increase I.
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
</style>
<span class="a">Creating</span> <span>and</span> <span>Implementing</span>
</p>
</center>
Its very simple, You have to change you p tags like
<p>
<span class="highlight-first-letter"><b style="font-size:20px;">C</b>reating</span> <span>and</span> <span class="highlight-first-letter"><b style="font-size:20px;">I</b>mplementing</span>
</p>
your output is look like
I'm not sure about first-text, but first-letter should work for the C.
For the I, you would have to wrap it in a span and give it a class unfortunately.
https://caniuse.com/#feat=css-first-letter
--Update--
I'm not sure if you aware, but style tags are not 'scoped'. This means that all <p> tags will have their first letters increased, is this what you want?
Also, the center tag is deprecated and should not be used.
<style>
p{
text-align: center;
font-size: 32px;
color: #424242;
margin-top: 15px;
font-family:Rockwell;
}
.highlight-first-letter::first-letter{
font-size:40px;
display: inline-block;
}
</style>
<p>
<span class="highlight-first-letter">Creating</span> <span>and</span> <span class="highlight-first-letter">Implementing</span>
</p>
i have done it with jquery it can be achieved also in javascript bydocument.getelementbyid
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=o>c js isj kl</div>
<script>
var txt = $('#o').text();
var new_text = txt.replace(/i/gi, 'I') ;
$('#o').text(new_text.replace(/c/gi,'C'));
</script>
after your update i havev found that in css
introduce span in between your text
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
.l::first-letter{
font-size:40px
}
</style>
<span class="a">Creating</span> <span>and</span> <span class=l>Implementing</span>
</p>
</center>
InnerText div doesnt fit to the outer div Text if i give a top offset to the InnerText div it fits perfectly but i cant hardcord this as entire html is created in Runtime using C# application, i cant find the reason why is this happening.
Please bear with me as i am totally noob in html and Css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Title</title>
<meta http-equiv='X-UA-Compatible' content='IE=9'/>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<style type='text/css'>body {background-color:#d4c3d4 ; overflow: hidden; }</style>
</head>
<body>
<div id='text' style='height:110px;'>
<div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
<span class='article' style='padding-left:4px;'>
<span style="font-size:110px">
<span style="color:#FF8C00">
<span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>
</span>
</span>
</span>
</div>
</div>
</body>
Output:
Edited:
I Cant change the height of div as it plays in LED every Pixel matters and increasing its height change an entire resoltion
Note that the height: 110px for outer div and the font-size:110px in the span this makes one parent div smaller than the text it contains,
the solution :
1- change the height to bigger value or delete it from style. or
2- change the font-size to smaller value
as for automatic creation for html , I recommend shrinking the size of the innertext to: say 80px.
Method 1: Only Remove style=height:110px; I added a border for you see Result :
body {background-color:#d4c3d4 ; overflow: hidden; }
<div id='text' style='border: 1px solid red;'>
<div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
<span class='article' style='padding-left:4px;'>
<span style="font-size:110px">
<span style="color:#FF8C00">
<span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>
</span>
</span>
</span>
</div>
</div>
Method 2 : use min-height instead of height :
body {background-color:#d4c3d4 ; overflow: hidden; }
<div id='text' style='min-height:110px;border: 1px solid red;'>
<div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
<span class='article' style='padding-left:4px;'>
<span style="font-size:110px">
<span style="color:#FF8C00">
<span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>
</span>
</span>
</span>
</div>
</div>
body {background-color:#d4c3d4 ; overflow: hidden; }
#text {
border:thin black solid;
width:auto;
}
<div id='text' >
<div id='innerText' style='position:relative; left: 0px; top: 0px;'>
<span class='article' style='padding-left:4px;'>
<span style="font-size:110px">
<span style="color:#FF8C00">
<span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>
</span>
</span>
</span>
</div>
</div>
Is this the same that you want?
I have removed white-space : nowrap;
You can use white-space : break-word so that the extra contents will be in new line if it doesn't fit on the same line.
I have a user managment block on my website and I'm trying to display a bit information there.
I think that nothing is better than example with pictures.
This is how the block looks now:
And this is how I want the block to look like:
Is there any good way to do that? I added those dashes manually, and this is not the way I'm looking for, I want it responsive.
Here is the block code:
<div class="account-box">
Welcome, guess. <br>
<hr>
Coins: <span style="float: right;">0</span> <br>
Points: <span style="float: right;">0</span> <br>
Total Referrals: <span style="float: right;">0</span> <br>
<hr>
Logged as [username] <span style="text-align: right;"><span class="fa fa-sign-out fa-fw"></span>Logout</span>
</div>
I recently had to do something similar. Here's what I came up with:
.entry {
display: flex;
align-items: center;
}
.entry>.spacer {
flex-grow: 1;
border-bottom: 1px dashed currentColor;
margin: 4px;
}
<div class="entry">
Label:
<ins class="spacer"></ins>
123
</div>
Adjust as needed!
I've got an anchor tag with multiple lines of text and at the beginning a span tag which includes an iconfont. Now I want to have all lines of text to be on the same intend. How can I achieve this?
HTML-Code:
<div class="controlls">
<p class="catalogue-pdf">
<span class="icon-pdf"></span> PDF download
<span class="separation-point">·</span> 82,0 kB
</p>
<p class="catalogue-link">
<span class="icon-book"></span> Stack Overflow Question Two Line Texts
</p>
</div>
Is this about what you're going for?
HTML:
<p class="catalogue-link">
<a href="http://www.google.com/" class="text-link" target="_blank">
<span class="icon-book"></span>
<span class="link-text">Stack Overflow Question Two Line Texts</span>
</a>
</p>
CSS:
.catalogue-link a {
display: flex;
align-items: flex-start;
}
.catalogue-link .link-text {
margin-top: 15px;
margin-left: 0.5rem;
}