How to vertical align single or multiple line ?
I need for ellipsis, because in some situations i want to show only one line, and sometimes two lines.
this is my code so far:
html, body, p {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.ellipsis {
height: 100px;
border: 5px solid #AAA;
}
.blah {
overflow: hidden;
height: 1.2em;
line-height: 1.2em;
display: block;
}
.blah:before {
content:"";
float: left;
width: 5px;
height: 3.6em;
}
.blah > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
live example: http://jsfiddle.net/0dqef9da/274/
Vertical align center you use simply text-align: center; and if you want to use ellipsis
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
</style>
</head>
<body>
<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>
<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>
<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>
</body>
</html>
please follow the link:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
In ellipsis you need also div width.. Please check the above code
You should use word-break:break-all in you text css style attribute
Related
I have made a tab wrapper with 2 tabs. Under the tabs I have a div with content.
This is my code:
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: table-cell;
}
.content {
background-color: aqua;
}
.role-tab {
cursor: pointer;
display: inline-block;
height: 50px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
margin-right: 19px;
}
.role-tab>p {
display: table-cell;
height: 50px;
overflow: visible;
vertical-align: middle;
width: 100%;
}
.role-tab-active {
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
<div class="tab-wrapper">
<div class="role-tab role-tab-active">
<p>Role tab 1</p>
</div>
<div class="role-tab">
<p>Role tab 2</p>
</div>
</div>
<div class="content">
<p>Content</p>
</div>
The styling and everything are working good. Now I want to add some padding-top so the border-bottom will go under the div. This is a screenshot what I want:
I want that the border-bottom goes under the div instead of in the div.
I have tried margin-top, padding-top and top, but it didn't work
How can I achieve when the tab is active that the border-bottom goes under the div instead inside it?
just set the margin-bttom: -3px; for the active class and its done :
.role-tab-active {
margin-bottom:-3px;
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
see below snippet :
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: table-cell;
}
.content{
background-color: aqua;
}
.role-tab {
cursor: pointer;
display: inline-block;
height: 50px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
margin-right: 19px;
margin-bottom:-3px;
}
.role-tab > p {
display: table-cell;
height: 50px;
overflow: visible;
vertical-align: middle;
width: 100%;
}
.role-tab-active {
margin-bottom:-3px;
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
<div class="tab-wrapper">
<div class="role-tab role-tab-active">
<p>Role tab 1</p>
</div>
<div class="role-tab">
<p>Role tab 2</p>
</div>
</div>
<div class="content">
<p>Content</p>
</div>
You can't move borders via padding and margin. It's not an element but part of the element.
Give the .tab-wrapper a static height instead of default auto. Whatever the size of your border, the containing div will adjust to it instead, so we give it a static height to allow overflow. And then make it display:flex.
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: flex;
height: 50px;
}
You can see that both the parent and tab items are of 50px height, but that's not really the case when rendered. box-sizing: content-box being the default css property, your official active role tab height is 53px, thus, overflowing the div by 3px and giving the border an "under the div" effect
Fiddle: https://jsfiddle.net/c5u3wzv2/5/
I'm trying to center a title according to the screen's center, while it's container doesn't take 100% of the screen's width.
I'm also need to text to be truncated and don't want to leave a padding on the right.
This is what I've got so far - JSFiddle. You can see that the text in the yellow div is not aligned with the text bellow. If I add a padding-right to the yellow div, upon resize, the text won't take 100% of the yellow div. Any suggestions?
HTML
<div class="cont">
<div class="left-h">
place holder
</div>
<div class="middle-h">
my very long long title goes here
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>
CSS
.cont{
width: 100%;
border: 1px solid black;
display: flex;
text-align: center;
}
.left-h{
flex-basis: 150px;
background-color: #e5e5e5;
}
.middle-h{
background-color: yellow;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.real-center{
width: 100%;
text-align:center;
}
I finally figured this one out, and once again a pseudo helped me achive impossible things
By adding a width and a min-width it will keep the text centered according to your requirements
.middle-h::after{
content: '';
display: inline-block;
width: calc(100% - 150px);
max-width: 148px; /* 150px - 2px border */
}
Fiddle sample
Stack snippet
.cont{
width: 100%;
border: 1px solid black;
display: flex;
text-align: center;
}
.left-h{
flex-basis: 150px; /* width/height - initial value: auto */
background-color: #e5e5e5;
}
.middle-h{
background-color: yellow;
flex: 1 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.middle-h::after{
content: '';
display: inline-block;
width: calc(100% - 150px);
max-width: 148px; /* 150px - 2px border */
}
.real-center{
width: 100%;
text-align:center;
}
<div class="cont">
<div class="left-h">
place holder
</div>
<div class="middle-h">
my very long long title goes here
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>
Updated
Found yet another way when answering another question which had both a left and a right item
The upside with this is one, it doesn't need predefined width.
Fiddle sample
Stack snippet
.cont {
display: flex;
text-align: center;
border: 1px solid black;
}
.cont > * {
white-space: nowrap;
padding: 2px 4px;
background: lightgray;
}
.cont > .center {
background: yellow;
overflow: hidden;
text-overflow: ellipsis;
}
.cont .left,
.cont::after {
content: '';
flex: 1;
}
.real-center{
width: 100%;
padding: 2px 4px;
text-align:center;
}
<div class="cont">
<div class="left">
place holder
</div>
<div class="center">
my very long long title goes here
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>
This is tricky because you want to center the contents of middle-h within the viewport and as explained here the best way inside a flexbox container is to use absolute position so that it centers relative to the viewport. But, it's harder to get text-overflow: ellipsis; working with an absolute position element.
This is the closest approach I have found..
<div class="cont">
<div class="left-h">
place holder
</div>
<div class="middle-h">
<span class="abs-center">my very long long title goes here</span>
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>
.abs-center {
position: absolute;
left: 150px;
right: 150px;
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
margin-left: 8px;
margin-right: 8px;
}
http://www.codeply.com/go/S2sw2jrn7p
Please check this example JsBin, here we have simple layout we have a child which have too long text and we need to make it no-wrap ellipsis to avoid breaking of layout but parent seems to occupy the width more then (probably equal to the text) the actual displayed text.
Below is the code
HTML
<div class="title-logo-container" >
<span class="logo">
<a href="/" >
<img src="" alt="LOGO IMAGE">
</a>
</span>
<p class="page-title" s>
test test test test test test test test test test test test test test test
</p>
CSS
.title-logo-container {
border: solid 1px #f00;
display:inline-block;
float:left;
}
.logo {
margin: 1.375em 1.5625em 15px;
padding: 0;
position: relative;
width: 5.625em;
z-index: 103;
display: inline-block;
}
.page-title {
max-width:40%;
display: inline-block;
margin: 0;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Please suggest.
Expected Output
You're specifying a percentage max-width for an inline-block that is a child of a float that doesn't have an explicit width. This results in undefined behavior because there is a circular dependency between the parent (float) width and the child (inline-block) width.
The apparent browser behavior is that the float is shrink-wrapped to the size of its contents — just enough to contain the content in one line — first, so that it has a size on which the inline-block can then base its 40% max-width. The inline-block then clips its content via overflow: hidden. The size of the float is not computed again.
As BoltClock said, I dont think here inline-block works for this situation, you can try table like this:
Demo
.title-logo-container {
clear: both;
border: solid 1px #f00;
background: green;
display: table-cell;
}
.logo {
margin: 1.375em 1.5625em 15px;
padding: 0;
position: relative;
width: 5.625em;
z-index: 103;
display: table-cell;
background: #ff0;
}
.page-title {
max-width: 40%;
display: table-cell;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #ccc;
}
Hope this helps you !
Check out below solution:
Demo
CSS:
.title-logo-container {
border: solid 1px #f00;
display:inline-block;
float:left;
width:100%;
}
.logo {
margin: 1.375em 1.5625em 15px;
padding: 0;
position: relative;
width: 100px;
z-index: 103;
display: inline-block;
}
.page-title {
width: calc(100% - 160px);
display: inline-block;
margin: 0;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
This question already has answers here:
Text-overflow ellipsis on left side
(10 answers)
Closed 7 years ago.
Consider this html/css snippet:
.l { text-align: left; }
.r { text-align: right; }
p {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: solid 1px green;
}
<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>
It shows two fixed-width containers with some text too long to fit, with overflow set to show an ellipsis to show that some text is hidden. The first container is left justified, the second is right justified.
The result shows that the ellipsis is on the right for both examples.
However, for the second right justified one, I'd like to achieve this:
...4555666777888999
instead of
1112223334445556...
Is this possible?
You can set the direction of text from right to left using css direction property direction: rtl:
.l {
text-align: left;
direction: rtl;
}
.r {
text-align: right;
}
p {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: solid 1px green;
}
<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>
direction
Set the direction CSS property to match the direction of the text: rtl
for languages written from right-to-left (like Hebrew or Arabic) text
and ltr for other scripts. This is typically done as part of the
document (e.g., using the dir attribute in HTML) rather than through
direct use of CSS.
References
MDN direction
To get this effect you have to use a little hack. See the following example:
p {
border:1px solid #000;
width:150px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reverse-ellipsis {
text-overflow: clip;
position: relative;
background-color: white;
}
.reverse-ellipsis:before {
content: '\02026';
position: absolute;
z-index: 1;
left: -1em;
background-color: inherit;
padding-left: 1em;
margin-left: 0.5em;
}
.reverse-ellipsis span {
min-width: 100%;
position: relative;
display: inline-block;
float: right;
overflow: visible;
background-color: inherit;
text-indent: 0.5em;
}
.reverse-ellipsis span:before {
content: '';
position: absolute;
display: inline-block;
width: 1em;
height: 1em;
background-color: inherit;
z-index: 200;
left: -.5em;
}
<p class="ellipsis reverse-ellipsis">
<span>111222333444555666777888999</span>
</p>
<p class="ellipsis">111222333444555666777888999</p>
More information about this you can find here: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/
I'm trying to adapt a few a elements to the total width of the container they are in.
This is the code that I currently have: http://codepen.io/anon/pen/FsgvI
HTML
<div class="box">
<div class="title">
<div class="something">
<h3>
This is foo
>
and then bar
>
and then test
</h3>
</div>
</div>
<div class="content">
asdijfg asoidf oasidf aosidf
</div>
</div>
CSS
.box {
border: 1px solid red;
display: inline-block;
}
.content {
border: 1px solid blue;
width: 170px;
height: 100px;
}
.title {
height: 30px;
}
h3, h3 > a {
text-overflow: ellipsis;
overflow: hidden;
}
How can I make the text adapt to the width of the box container? And by "adapt" I mean keep the current font size and cut (ellipsis) the text that doesn't fit inside.
Regards
Edit:
Sorry for the missunderstanding. I can't set a width to the box class because I don't know how wide it will be. I need it to be as wide as many items (content box) as there are.
This is possible with a few changes to your CSS.
Make .title position: relative; this will make h3 position relative to it
Make h3 position: absolute; to take it out of the document flow and give it width: 100%
Add white-space: nowrap; to h3 stop the contents wrapping onto the new line
Remove width: 170px; from .content to allow it to take up as much space as it needs
.box {
border: 1px solid red;
display: inline-block;
}
.content {
border: 1px solid blue;
height: 100px;
}
.title {
position: relative;
height: 50px;
width: 100%;
}
h3 {
position: absolute;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
<div class="box">
<div class="title">
<div class="something">
<h3>
This is foo
>
and then bar
>
and then test
</h3>
</div>
</div>
<div class="content">
asdijfg asoidf oasidf aosidf
</div>
</div>
Codepen: http://codepen.io/anon/pen/GgkJr
I had to add a width to the containing element and add the white-space: nowrap; to the .something div.
.box {
border: 1px solid red;
display: inline-block;
width:170px;
}
.content {
border: 1px solid blue;
width: 170px;
height: 100px;
}
.title {
height: 30px;
}
.something{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}