I have got problem with word wrapping in div.
I am trying to make something like that:
Link, but i have got this: Link. This is my code:
#div-1 {
height: 28px;
width: 250px;
margin-top: 5px;
border: 1px solid rgb(200,200,200);
}
#span-1 {
font-size: 18px;
color: #0066FF;
line-height: 28px;
position: absolute;
}
<div id="div-1">
<span id="span-1"> SomeTextSomeTextSomeTextSomeTextSomeText </span>
</div>
Can you help me? Thanks.
You can use white-space in combination with overflow. And text-overflow if you like. See the example below.
#div-1 {
height: 28px;
width: 250px;
margin-top: 5px;
border: 1px solid rgb(200,200,200);
font-size: 18px;
color: #0066FF;
line-height: 28px;
/* Does the magic */
overflow :hidden;
white-space: nowrap;
text-overflow: ellipsis; /* Adds the ... */
}
<div id="div-1">
SomeTextSomeTextSomeTextSomeTextSomeText
</div>
Add overflow property to your div style:
#div-1 {
overflow: hidden;
}
Hope that helps.
Remove position: absolute from #span-1 and add overflow-x: hidden; for #div-1. You can also use text-overflow: ellipsis; which adds ... if the text overflows.
#div-1 {
height: 28px;
width: 250px;
margin-top: 5px;
border: 1px solid rgb(200,200,200);
overflow-x: hidden;
}
#span-1 {
font-size: 18px;
color: #0066FF;
line-height: 28px;
}
<div id="div-1">
<span id="span-1"> SomeTextSomeTextSomeTextSomeTextSomeText </span>
</div>
Try this
Make #div-1 position:relative and add overflow:hidden property.
CSS
#div-1 {
height: 28px;
width: 250px;
margin-top: 5px;
border: 1px solid rgb(200,200,200);
overflow:hidden;
position: relative;
}
#span-1 {
font-size: 18px;
color: #0066FF;
line-height: 28px;
position: absolute;
}
HTML
<div id="div-1">
<span id="span-1"> SomeTextSomeTextSomeTextSomeTextSomeText </span>
</div>
hope this helps..
#div-1 {
height: 28px;
width: 250px;
margin-top: 5px;
border: 1px solid rgb(200,200,200);
overflow:hidden;
}
#span-1 {
font-size: 18px;
color: #0066FF;
line-height: 28px;
}
<div id="div-1">
<span id="span-1"> SomeTextSomeTextSomeTextSomeTextSomeText </span>
</div>
Add this:
word-wrap: break-word;
Related
I'm trying to make a 'custom' progress bar with numbers at each end of the progress bar. Left hand number being the current value, and the right hand side being the max/target value. I've got it so that I'm showing the two numbers but I can't seem to position the right hand number correctly.
What I'm trying to achieve is...
and what I currently have is...
This is what I currently have code wise...
JSFiddle
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
float: right;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I've tried putting the the second span outside the the progress inner div but then moves the text outside the whole thing and I couldn't work out how to move it into the correct place.
Can anyone help?
I have an interesting solution using linear-gradients, its pretty close, try playing around with the margins and outline to get border right.
.progress-outer {
width: 96%;
display: flex;
height: 35px;
margin: 10px 2%;
text-align: center;
border: 1px solid #dcdcdc;
background-image: linear-gradient( 80deg, orange 37% , #f4f4f4 37% );
border-radius: 20px;
justify-content: center;
align-items: center;
}
.progressBarCurrent {
color: black;
text-align: left;
width: 50%;
position: relative;
margin: 0px;
margin-left: 20px;
}
.progressBarGoal {
color: black;
position: relative;
text-align: right;
width: 50%;
margin: 0px;
margin-right: 20px;
}
<div class="progress-outer">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
Instead of float:left you can use position:absolute
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
position: relative;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
position: absolute;
right: 5px;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I want to make a line between two circles, for that, I have used the below code by using pseudo-element CSS. I would like to make the line between these two circles responsive, now it's intersecting with circle in some other devices like mobile, etc. How to make it responsive or any other solution that does the same design? Please help.
.cart_header_tab {
display: flex;
margin-top: 35px;
}
.cart_header_tab > div {
text-align: center;
margin-right: 100px;
cursor: pointer;
}
.cart_header_tab h6 {
color:#02b5f9;
font-weight: 400;
}
.cart_header_tab div:last-child h6 {
color:#ccc
}
span.circle_one::after {
content: "";
width: 152px;
height: 1px;
background: #eee;
position: absolute;
top: 6px;
left: 14px;
}
.cart_header_tab span.circle_one {
border: 1px solid #2fe4ba;
}
.cart_header_tab span {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 100%;
position: relative;
}
<div class="cart_header_tab">
<div>
<span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div>
<span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
You can start tweaking the code something like this:
Be aware that if you wanted to change the size or width of the circle you have to tweak the other property in the css, hope that is not an issue here.
#cart_header_tab {
position: relative;
display: inline-block;
}
#cart_header_tab::after {
content: "";
position: absolute;
width: 50%;
z-index: -1;
top: 20%;
left: 25%;
border: 1px solid gray;
/* line between circles */
}
#cart_header_tab div {
display: inline-block;
font-size: 12px;
text-align: center;
min-width: 150px;
}
#cart_header_tab span {
color: white;
background: white;
display: block;
height: 15px;
margin: 0 auto 10px;
padding-top: 20px;
width: 30px;
border-radius: 50%;
border: 1px solid #22A7F2;
}
<div id="cart_header_tab">
<div><span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div><span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
Using flex i insert that line between circle as separator itself is a child of flex and hen using margin adjust that according to circles
.cart_header_tab {
display: flex;
margin-top: 35px;
}
.cart_header_tab>div {
text-align: center;
cursor: pointer;
}
.cart_header_tab h6 {
color: #02b5f9;
font-weight: 400;
}
.cart_header_tab div:last-child h6 {
color: #ccc
}
.cart_header_tab {
position: relative
}
.sep {
width: 100%;
height: 1px;
background: #eee;
margin: 9px -21px 0;
}
.cart_header_tab span.circle_one {
border: 1px solid #2fe4ba;
background: #fff;
z-index: 1;
}
.circle_two {
background: #fff;
z-index: 1;
}
.cart_header_tab span {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 100%;
position: relative;
}
<div class="cart_header_tab">
<div>
<span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div class="sep"></div>
<div>
<span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
So I have the following code below.
.innerDiv1 {
display: inline-block;
width: 45%;
border-right: 1px solid;
padding-right: 5px
}
.innerDiv2 {
display: inline-block;
width: 45%;
padding-left: 5px;
}
.inner2 {
border: 1px solid black;
}
.rect {
width: 0%;
height: 20px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: black;
font-size: 12;
}
.sendreceiveBtn {
height: 25px;
width: 100%;
font-size: 12px;
max-height: 25px;
}
<div>
<div class="inlineItems" id="progBtnBar">
<div class="innerDiv1">
<div class="inner2">
<div id="myProgress">
<div class="rect">0%</div>
</div>
</div>
</div>
<div class="innerDiv2">
<button class=sendreceiveBtn>Transmit</button>
</div>
</div>
</div>
I need to line up a button vertically with another div, with both as inline-block inside another div, so they end up next to eachother, preferably the exact same size. However, something about the button is pushing it down a bit. Nothing I have done so far has been able to change this EXCEPT for increasing the font of the text in the button. What is making this space, and how can I get these to line up?
this is the culprit:
.rect {
line-height: 30px;
}
Vertical align allows multiple siblings to share the same vertical position.
.innerDiv1 {
display: inline-block;
width: 45%;
border-right: 1px solid;
padding-right: 5px
vertical-align: middle;
}
.innerDiv2 {
display: inline-block;
width: 45%;
padding-left: 5px;
vertical-align: middle;
}
You can see a working example in the following jsfiddle: https://jsfiddle.net/gkotxdt7/
Replace Your existing CSS with below:
.innerDiv1 { display: table-cell; width: 45%; border-right: 1px solid; padding-right: 5px; vertical-align: middle; }
.innerDiv2 { display: table-cell; width: 45%; padding-left: 5px; vertical-align: middle; }
.inner2 { border: 1px solid black; }
.rect { width: 0%; height: 20px; background-color: #4CAF50; text-align: center; line-height: 30px; color: black; font-size: 12; }
.sendreceiveBtn { min-height: 25px; width: 100%; font-size: 12px; height: auto; }
#progBtnBar{
display: table;
width: 100%;
height: auto; }
Thats it. It will resolve the issue.
I want to create something like the picture, where the #body is between #leg1 and #leg2, three of them should be horizontally in line to the bottom. Any idea how to achieve this? I tweaked some property such as display:inline, or float:left, float:right, but none of them work as I expect.
.comment_leg {
s width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
/*position:relative;*/
border: 1px solid orange;
/*height:60px;*/
width: 500px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
/*border-color:yellow;*/
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<br>
<br>
<br>
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
From what I understood of your "凸" shape I guess this is what you want:
NOTE: You can adjust height and width depending on your preference.
.comment_leg {
width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
vertical-align: bottom;
display: inline-block;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
border: 1px solid orange;
min-height:100px;
width: 150px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
display: inline-block;
vertical-align: bottom;
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
I've created a simple widget in JQuery that wraps texboxes in a div, adds a clear text button and a placeholder. Added the main bits for this at http://jsfiddle.net/BpkDN/, something in the CSS which I can't find is messing the styling up in ie7. Seems to work in every other version.
Here is an extract of what my widget produces:
CSS:
::-ms-clear {
display: none;
}
.jui-textbox {
border: 1px solid #DADADA;
position: relative;
padding:0 !important;
white-space: nowrap;
background: #fff;
overflow: hidden;
height: 33px;
line-height: 33px;
display: inline-block;
*display:inline;
margin: 10px 0;
}
.jui-textbox input {
background-color: transparent;
color: #313131;
height: 33px !important;
line-height:33px\9;
width: 300px;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0 5px !important;
border: none;
float:left;
}
.jui-textbox-placeholder {
position: absolute;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
color: #A1A1A1;
height: 33px;
line-height: 33px;
padding: 0;
margin: 0;
left: 5px;
overflow: hidden;
cursor: text;
}
.jui-textbox-hover {
border: 1px solid #CACACA;
}
.jui-textbox-active {
border: 1px solid #a1a1a1;
}
.jui-textbox-clear.show{
display:inline-block !important;
*display:inline !important;
}
.jui-textbox-clear {
display:none;
cursor: pointer;
background: #fff;
border-left: 1px solid #a1a1a1;
width: 33px;
height: 33px;
background-image:url(icons/x.png);
background-position:center;
background-repeat:no-repeat;
}
.jui-hoverable:hover,.jui-hoverable-hovered
{ background-color: #f1f1f1;}
textarea:focus, input:focus{
outline: none;
}
Html
<div class="jui-textbox">
<div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
Default
</div>
<input type="text" style="width: 300px;">
<div class="jui-textbox-clear jui-hoverable jui-icons-x"></div>
</div>
Try this:
CSS:
::-ms-clear {
display: none;
}
.jui-textbox {
width: 300px;
border: 1px solid #DADADA;
position: relative;
padding:0 !important;
white-space: nowrap;
background: #fff;
overflow: hidden;
height: 33px;
line-height: 33px;
display: inline-block;
/**display:inline;*/
margin: 10px 0;
}
.jui-textbox input {
background-color: transparent;
color: #313131;
height: 33px !important;
line-height:33px\9;
width: 300px;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0 5px !important;
border: none;
float:left;
}
.jui-textbox-placeholder {
position: absolute;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
color: #A1A1A1;
height: 33px;
line-height: 33px;
padding: 0;
margin: 0;
left: 5px;
overflow: hidden;
cursor: text;
}
.jui-textbox-hover {
border: 1px solid #CACACA;
}
.jui-textbox-active {
border: 1px solid #a1a1a1;
}
.jui-textbox-clear.show{
display:inline-block !important;
*display:inline !important;
}
.jui-textbox-clear {
display:none;
cursor: pointer;
background: #fff;
border-left: 1px solid #a1a1a1;
width: 33px;
height: 33px;
background-image:url(icons/x.png);
background-position:center;
background-repeat:no-repeat;
position: absolute;
right: 0;
}
.jui-hoverable:hover,.jui-hoverable-hovered
{ background-color: #f1f1f1;}
textarea:focus, input:focus{
outline: none;
}
HTML:
<div class="jui-textbox">
<div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
Default
</div>
<input type="text" style="width: 300px;">
<div class="jui-textbox-clear jui-hoverable jui-icons-x"></div>
</div>
<br/>
<div class="jui-textbox">
<div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
Focused
</div>
<input type="text" style="width: 266px;">
<div class="jui-textbox-clear jui-hoverable jui-icons-x show"></div>
</div>
Tested in IE7 (Vista).
Demo: http://jsfiddle.net/PENFT/
Another solution, but it's not very clean:
Removing width from .jui-textbox.
Adding float:left; to ".jui-textbox" and changing <br/> with <br
style="clear:both" />.
Note: <br style="clear:both" /> its so dirty.
In this case JavaScript is the simple hack, because in IE7 :focus doesn't work. Take a look at the ie7-js project.
IE7.js is a JavaScript library to make
Microsoft Internet Explorer behave
like a standards-compliant browser. It
fixes many HTML and CSS issues and
makes transparent PNG work correctly
under IE5 and IE6.
Upgrade MSIE5.5-7 to be compatible with MSIE8.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
You can also refer to this SO question. IE7 doesn't support this pseudo class.