I am having some issues trying to get text-overflow: ellipsis to work on a span where I don't have a fixed width. The span should expand according to the content, but if the content is larger than the space available, then the content should show ellipsis. Here is a link to JSFiddle.
The CSS and HTML:
.row {
width: 50%;
border: 1px solid black;
}
.wrapper {
text-align: left;
}
.label {
display: inline-block;
margin-top: 10px;
margin-right: 4px;
padding: 0 8px;
border-radius: 4px;
color: white;
background-color: grey;
height: 20px;
vertical-align: middle;
font-size: 14px;
}
.content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="row">
<div class="wrapper">
<div class="label">
<span class="content">text</span>
</div>
<div class="label">
<span class="content">longer text label</span>
</div>
<div class="label">
<span class="content">Another label</span>
</div>
<div class="label">
<span class="content">A very very very very very very long text label that should fit inside row and cut the text and show ellipsis...</span>
</div>
</div>
</div>
Check this plunker:
https://jsfiddle.net/42khut93/3/
You need to set max-width for both the label and content classes
and adjust the padding in percentage.
Also set the .content display to block or inline-block
.row {
width: 50%;
border: 1px solid black;
}
.wrapper {
text-align: left;
}
.label {
display: inline-block;
margin-top: 10px;
margin-right: 4px;
padding: 0 1%; //in percentage
border-radius: 4px;
color: white;
background-color: grey;
height: 20px;
vertical-align: middle;
font-size: 14px;
max-width: 98%; //max-width 100% - 1% padding + 1% padding
}
.content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%; // set max-width
}
<div class="row">
<div class="wrapper">
<div class="label">
<span class="content">text</span>
</div>
<div class="label">
<span class="content">longer text label</span>
</div>
<div class="label">
<span class="content">Another label</span>
</div>
<div class="label">
<span class="content">A very very very very very very long text label that should fit inside row and cut the text and show ellipsis...</span>
</div>
</div>
</div>
Related
I am trying to make menu items out of the following items, but I'm struggling with making the text inside the paragraph element responsive to its parent. I tried all positioning combinations, as well as every possible combination with percentages and sizing, but nothing worked the way it's supposed to.
I just want to have the text centered inside the circles...
.div-1 {
display: inline-block;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
You can see I used flexbox to achieve what you wanted.
.navbar-text {
display: flex;
justify-content: space-around;
}
.div-1 {
display: flex;
align-items: center;
justify-content: center;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
Here you go using flex box for aligment.
.div-1 {
display: flex;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
align-items:center;
justify-content: center;
}
.div-1 p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<span class="navbar-text" style="display:flex">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programsasdfsdfsdfsdfds</p>
</div>
</span>
I decided to add not-flex approach
You can try to use text-align and line-height. But one issue here - it doesn't support multiline. If you want long texts - then use flex.
.div-1 {
display: inline-block;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
text-align: center;
line-height: 80px;
}
.div-1 > p {
margin: 0;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
.div-1 {
display: flex;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
align-items:center;
justify-content: center;
}
.div-1 p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I want to have a box with text and an Icon inside. The Icon is supposed to stick to the right side of the box, the text to the left.
If the text is too long to fit into the box next to the icon, I want it to be shortend by the text-overflow:ellipsis property. I do not insist on implementing it with Flex-Box, if there is a better way to do it.
It should look like this:
And this is what I achieved so far:
div#Wrapper {
border: 0.2em solid black;
width: 6em;
padding: 0.5em;
display: flex;
}
span#Text {
white-space: nowrap;
text-overflow: ellipsis;
}
span#Icon {
background-color: blue;
border-radius: 50%;
height: 1em;
width: 1em;
display: inline-block;
margin-left: auto;
}
Short Text:
<div id="Wrapper">
<span id="Text">
This
</span>
<span id="Icon">
</span>
</div>
<br><br><br>
Text:
<div id="Wrapper">
<span id="Text">
This is Text
</span>
<span id="Icon">
</span>
</div>
<br><br><br>
Long Text:
<div id="Wrapper">
<span id="Text">
This is long long long Text
</span>
<span id="Icon">
</span>
</div>
You can add flex: 1 and overflow: hidden properties on text element.
div#Wrapper {
border: 0.2em solid black;
width: 6em;
padding: 0.5em;
display: flex;
}
span#Text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
span#Icon {
background-color: blue;
border-radius: 50%;
height: 1em;
width: 1em;
margin-left: auto;
}
<div id="Wrapper">
<span id="Text">
This is long long long Text
</span>
<span id="Icon"></span>
</div>
I have replaced the ID's with classes since the ID must be unique in the document. Furthermore, I added overflow: hidden for the text and flex: 0 0 auto for the icon.
div#Wrapper {
border: 0.2em solid black;
width: 6em;
padding: 0.5em;
display: flex;
}
span.Text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; /* Added */
}
span.Icon {
background-color: blue;
border-radius: 50%;
height: 1em;
width: 1em;
display: inline-block;
margin-left: auto;
flex: 0 0 auto; /* Added */
}
Short Text:
<div id="Wrapper">
<span class="Text">
This
</span>
<span class="Icon">
</span>
</div>
<br><br><br> Text:
<div id="Wrapper">
<span class="Text">
This is Text
</span>
<span class="Icon">
</span>
</div>
<br><br><br> Long Text:
<div id="Wrapper">
<span class="Text">
This is long long long Text
</span>
<span class="Icon">
</span>
</div>
Here you go.
https://jsfiddle.net/hxz05g9j
Another approach is make circle as :after css.
I have the following snippet of html that forms an X-Y scrollable listbox
* {
font-family: "consolas";
}
.listbox {
border: 1px solid black;
padding: 4px;
width: 150px;
height: 200px;
display: flex;
flex-direction: column;
}
.caption {
font-weight: bold;
background-color: #aaf;
padding: 10px;
}
.content {
flex-grow: 1;
overflow: scroll;
}
.item {
background-color: #ddd;
padding: 2px;
padding-left: 6px;
margin-top: 4px;
white-space: nowrap;
}
<div class="listbox">
<div class="caption">Caption</div>
<div class="content">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three (this has a longer bit)</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight (so does this)</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
</div>
It's working fine, with one problem, as the user scrolls from left to right, the background of the div seems to get left behind. It's as though the actual div only stretches the width of its parent, and the scrolling/overflow thing is "faked" somehow.
Why is this the case?
How do I address the problem? The behaviour I want is for all the items to appear to be the same width as the largest one.
Try adding a container <div class="items"> around the items set it to display:inline-block.
.items {
display: inline-block;
}
* {
font-family: "consolas";
}
.listbox {
border: 1px solid black;
padding: 4px;
width: 150px;
height: 200px;
display: flex;
flex-direction: column;
}
.caption {
font-weight: bold;
background-color: #aaf;
padding: 10px;
}
.content {
flex-grow: 1;
overflow: scroll;
}
.items {
display: inline-block;
}
.item {
background-color: #ddd;
padding: 2px;
padding-left: 6px;
margin-top: 4px;
white-space: nowrap;
}
<div class="listbox">
<div class="caption">Caption</div>
<div class="content">
<div class="items">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three (this has a longer bit)</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight (so does this)</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
</div>
</div>
Explanation: by default a block level element takes 100% width of the container no more than that, however an inline block will expand to content length if available e.g. in a scrollable container.
Also apply .items {min-width: 100%;} in case you want the background to grow full width even with less text in every row.
I have a problem with vertically align 3 spans inside a div. It's easy to achieve, but vertical align doesn't work when i use float. I want that lightblue bar to be vertically centered. Code:
.container {
}
.text-1 {
float: left;
padding-right: 10px;
}
.bar {
background-color: lightblue;
border-radius: 5px;
float: left;
height: 5px;
width: 150px;
}
.text-2 {
padding-left: 10px;
}
<div class="container">
<span class="text-1">Text 1</span>
<span class="bar"> </span>
<span class="text-2">Text 2</span>
</div>
Thank you very much for your help.
JSFiddle
You can use display: inline-block; along with vertical-align: middle; on your <span> elements instead of float. This way they are positioned next to each other too and you can apply the vertical alignment:
.container span {
display: inline-block;
vertical-align: middle;
}
.text-1 {
padding-right: 10px;
}
.bar {
background-color: lightblue;
border-radius: 5px;
height: 5px;
width: 150px;
}
.text-2 {
padding-left: 10px;
}
<div class="container">
<span class="text-1">Text 1</span>
<span class="bar"> </span>
<span class="text-2">Text 2</span>
</div>
How to I align text to the right side of the image icon like the one in the example picture.
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
I have to align the title, subsitle and a little square image.
It is easy to use float: left and NOT break the height of red border div.
You only have to add display: table-cell to the .app_top block. Here's the solution:
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
You could use display: inline-block instead.
#main-container {
border: 5px solid #3F3F3F;
width: 270px;
}
.container {
width: 250px;
height: 200px;
border: 5px solid #7F0008;
margin: 5px;
}
.box {
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.img {
background: url(http://placehold.it/100/25);
width: 100px;
height: 25px;
border: 5px solid #EBEAAE;
}
<div id="main-container">
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
</div>
Maybe another option is to put the attribute in a parent div instead of the element
html:
<div id="wrapper">
<div class="twoColumn">
<img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
</div>
<div class="twoColumn">
<p> this is a testingalot test</p>
<button> mybutton </button>
</div>
</div
css:
#wrapper{
border: 1px solid black;
}
.twoColumn{
width: 49%;
float:left;
border: 1px solid red;
}
button{
width: 50px;
height: 40px;
background: red;
}
img{
max-width: 100%;
}
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
Most simple solution would be to change your markup structure by wrapping your spans in a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
.top{
width: 95%;
position: fixed;
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3%;
padding-right: 3%;
border-bottom: 1px solid #b2b2b2;
}
.search{
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background-color: #e3e3e6;
}
.search::-moz-focus-inner {
border: 0;
padding: 0;
}
.items{
background-color: #ffffff;
width: 100%;
padding-top: 50px;
}
.app{
margin-left: 25px;
margin-right: 25px;
}
.app_top div{display:inline-block}
.app_top div span{display:block}
<div class="main">
<div class="top" >
<input type="text" class="search" />
</div>
<!-- Items -->
<div class="items" style="border: 1px solid black; padding-top: ">
<div class="app" style="border: 1px solid red;" >
<div class="app_top">
<div>
<img src="_img1.jpg" width="95"/>
</div>
<div>
<span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
<span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
<span class="" style="border: 1px solid blue;"> </span>
</div>
</div>
<div class="app_bottom">
</div>
</div>
</div>
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
img { float:left; }
.content { overflow:hidden; }