I have a tale in codepen, my table have long header text.
How can I fixed with header table th dynamically because The number of columns in my table is not fixed ?
Add spaces between the text.
Please use "word-wrap: break-word" style into you header for word break.
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
word-wrap: break-word;
width: 100px
}
Please add following CSS code for word breaking
word-wrap: break-word
you can check this url for more details.
Related
My link wraps to the second line when it's to long to fit. The problem is that it's not vertically aligned with the first word. How can I do that?
color: #353748;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 10px;
text-indent: 10px;
text-decoration: none;
How it looks like.
It may be fault of the indentation and you may be able to fix it by getting rid of text-indent and putting some horizontal margin if the text is too wide.
I am create code css below.
I want to horizontal scroll but when sentence is too long it's not create scrolling but sentence break and show in next line.
In image i want aaaa.. should be printed in only one line and bbb.. in second line.but aaa... sentence come on second line without tag.
html code & CSS code
this div tag container width is 80% of the screen.
code {
margin: 10px 0;
padding: 10px;
text-align: left;
display: inline-block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #6d7fcc;
color:#000;
}
<code> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</code>
Try using word break
word-break: normal;
After many try i get right answer..
white-space:nowrap;
This property remove white-space to add sentence to the new line.
I'm trying to get lines to surround an h1 but I'm having problems aligning the text with the surrounding lines. I've used embedded before / after attributes but I couldn't get them to work in Gmail so I opted of an inline attribute using borders on the h1. Currently the text "January 2018" is aligning below the surrounding lines. See code below.
h1 {
text-align: center;
color: #ffe800;
font-family: proxima-nova, sans-serif;
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
}
<h1 style="border-left: 150px solid #ffffff; border-right: 150px solid #ffffff; height: 3px; display: block;">January 2018</h1>
Thanks!
I think you need to change your display property from display:block to display:inline
i have this behavior:
Why the text have that space?
My goal is to left align the text with that one below.
Here what i have done:
CSS
.btn-basic {
font-size: 5.8em;
white-space: nowrap;
border: medium none;
}
.btn-basic p {
font-size: 0.3em;
line-height: 1.0em;
white-space: nowrap;
}
HTML
<div class="btn-basic">
FREE WI-FI
<p>Gratis. Senza limiti. Anche in streaming.</p>
</div>
Because character glyphs have space around them so they don't butt up against other character.
See:
span {
font-size: 144px;
color: white;
background: #000;
font-family: sans-serif;
}
<span>F</span>
<span>G</span>
<span>FG</span>
That 'space' may be different for each glyph (and font family). Combine that with the font-sizing you are using and you get the effect you are currently experiencing.
Unfortunately, there is very little you can do about it.
I'm working on my site and i want there to be an horizontal line by the right side of the page headers. Currently this is the code for my header, stripped css.
#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
letter-spacing: -2px;
/*text-transform: uppercase;
border-bottom:1px solid #15A2FF;*/
}
Alongside:
<div id="newhead"><?php the_title(); ?></div>
But for some reason i cant get the lines to show by the side of the header text.
Please help. http://jsbin.com/ILOlivI/1/edit
I think I would use a background-image in the header row that is overwritten by a background-color of the text. Something like this:
<div id="newHead"><div>the header text</div></span>
#newHead {
background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
}
#newHead div {
background-color: white;
display: inline-block;
padding-right: 10px;
}
Here's a jsfiddle example: http://jsfiddle.net/mVqY6/
This will only work if the text is not too long and if the text is positioned over the background image. In that case you'll need to do some tweaking.
If you are trying to put in a horizontal line level with the mid-line of the text, border-bottom is not really going to work is it?
Off the top of my head I would be using a single pixel .gif image stretched to 100% of the remaining space and aligned to the middle of the text... or if you want pixel perfect alignment to a specific text size, use a 1px wide .gif that has your line in it, plus x number of transparent pixels below.
You could introduce an SVG line, or float a DIV beside your text that is half height, with a border top or bottom. The DIV solution would probably make the most sense if you want to stay in pure CSS/HTML.