I have long text without spaces (like URL) in a <div>.
<div>
<span>veryverylongtextwithoutspaces</span>
</div>
If I set display:inline-block;, then the word-wrap doesn't work!
If I set display: block, then word-wrap works as it should! But div gets 100% width.
I need size div of the contents. Thank you
.block {
display: block;
border-radius: 3px;
padding: 12px;
background: #DCF8C6;
color: #000000;
word-wrap: break-word;
font-size: 16px;
}
.inline {
display: inline-block;
border-radius: 3px;
padding: 12px;
background: #DCF8C6;
color: #000000;
word-wrap: break-word;
font-size: 16px;
}
<div class='block'>
<span>veryverylongtextwithoutspaces</span>
</div>
I want this, but not work "word-wrap":
<br>
<div class='inline'>
<span>veryverylongtextwithoutspaces</span>
</div>
You must define a width to the content's container. Additionally, I believe you'll want to use word-break instead of word-wrap
p.keep {
border: 1px solid #000;
width: 150px;
word-break: keep-all;
}
/* This will do what you want */
p.break {
border: 1px solid #000;
width: 150px;
word-break: break-all;
}
<p class="keep">ThisiswaytoolongThisiswaytoolongThisiswaytoolongThisiswaytoolongThisiswaytoolong</p>
<p class="break">ThisiswaytoolongThisiswaytoolongThisiswaytoolongThisiswaytoolongThisiswaytoolong</p>
Related
How to remove this gap or merge the borders? Because the lengths are inconsistent
box1 and box2 are 100px, box3 is 200px but their lengths are inconsistent because border...
so how do their length are consistent?
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
This happens when you have elements that have display: inline or inline-block. Since the browser treats these elements the same way as text, a line-break will be treated as white-space.
Setting the font size to 0 for the wrapper basically eliminates the whitespace, but keep in mind, that this property will be inherited to child elements, so you may have to set the font-size back to >0 for children. Also, this may break layouts that use em as unit, so keep that in mind. By also adding box-sizing: border-box the gaps are gone.
main {
font-size: 0;
}
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
There is also a possible way to use comments to prevent the auto-formatting from adding the white-space / line-break. It does not look too elegant, but it gets the job done. Also, except for the box-sizing: border-box you don't need any additional CSS for this.
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div><!--
--><div class="shortBox">box2</div><!--
--><div class="longBox">box3</div>
</main>
The third way of solving this issue is to utilize flexbox. You can create layouts like this, without having to worry about gaps because of white-spaces or line-breaks.
watch this magic:
<main>
<div class="shortBox">box1</div><div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
Notice that first 2 divs are NOT divided with new line.
Then in CSS add this extra 2px like this:
.longBox {
width: 202px;
}
I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:
I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?
You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.
If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 500px;
display: inline-block;
word-spacing: -15px;
position: relative;
padding-left: 20px;
overflow: hidden;
}
.text-container::before {
content: '';
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
z-index: 1;
}
span {
font-size: 36px;
line-height: 1.5em;
color: white;
background-color: black;
padding: 0.25em 0.5em 0.25em 0;
max-width: 360px;
}
<div class="main">
<div class="text-container">
<span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
</div>
</div>
You can use box-shadow for this issue and display inline:
<div class="text">
<span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>
And css:
.text > span {
display: inline;
box-shadow: 25px 0 0 black, -10px 0 0 black;
background-color: black;
color: white;
}
Try to add after "Park:" and before "Kung"
padding workded!!!
change width by console browser and see result:
h1{
background-color: #ff6a6a;
padding: 33px;
display: inline-block;
word-wrap: break-word;
width:300px
}
<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert </h1>
Use <p> tag to wrap up the text and it apparently works demo
<div class="main">
<div class="text-container">
<p id="test">A Movie in the park: Kung Fu Panda</p>
</div>
</div>
css
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 400px;
}
p {
font-size: 36px;
line-height: 2em;
color: white;
background-color: black;
padding: 0.5em;
max-width: 360px;
}
I need to display a border around a div tag with a title in the border itself. In order to do this, this is what I have come up with so far
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
.componentTitle {
font-size: 18px;
width: 15%;
background-color: white;
margin-top: -25px;
}
<div class='componentWraper'><p class='componentTitle'>This is the title</p>This is the component body text</div>
As you can see I am using margin property to push the title up on top of the border. I am not sure if this is the proper approach to do this and I have the following questions.
I am positioning the title using pixels (margin) and a fixed value (-25px). This is a site that has to work on mobile phones, tablets as well. Is this an acceptable approach?
I am setting the background-color to white so that the border does not appear behind the text, is this an ok approach?
Is there a better and more acceptable way to do this, I do not want to use fieldset because we have little control over the border (border-radius).
There are three logical ways you can use to achieve this.
You can use a <fieldset> with a legend which is the basic HTML way of doing this. You can find more information about this here.
Use custom CSS with positioning, not negative margins or etc.:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper .componentTitle {
position: absolute;
top: -25px;
background: #fff;
padding: 0 10px;
}
<div class='componentWraper'>
<p class='componentTitle'>This is the title</p>This is the component body text</div>
Use custom CSS with pseudo-elements:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper::before {
content: 'This is the title';
position: absolute;
top: -10px;
padding: 0 10px;
background: #fff;
}
<div class='componentWraper'>This is the component body text</div>
I think you're on the right track. I'd make a few changes to have more control over the styling. You can use ems or pixels.
Wrap the title and content in a new div and give that a negative margin:
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
.componentWrapper div {
margin-top: -1em;
}
Set your title to display: inline-block and use padding to control the white space around it (instead of using width)
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em;
}
codepen
snippet:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
margin-top: 1em;
}
.componentWrapper div {
margin-top: -1.2em;
}
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em .3em;
}
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
This is what I came up with. I wanted to get rid of the negative margin, but couldn't figure out a way to do that.
See the Pen offset title by Yvonne Aburrow (#vogelbeere) on CodePen.
HTML
<div class="componentWrapper">This is the component body text</div>
CSS
.componentWrapper {
border: 1px solid blue;
border-radius: 40px;
padding: 16px;
width: 95%;
margin: 3em;
}
.componentWrapper:before {
content: "this is the title";
font-size: 18px;
width: 10%;
background-color: white;
border: 1px solid blue;
border-radius: 12px;
display: block;
margin-top: -29px;
padding: 3px;
}
I am not sure how a screen reader would deal with the title text being in the CSS (or how you would scale that up if you have a lot of different titles.
I have a div block i want to apply border-bottom just beneath the text and not throughout the whole div block
the div block is
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
You can wrap your text in an inline element like <span> and apply border to it.
HTML:
<div id="info-header">
<span>some text here...</span>
</div>
CSS:
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
Note: You can make your element inline-block if you wants to apply block level properties but keep it behaving like an inline element. This way you can also control the border-width and the distance between text and border line.
body {
background: green;
min-height: 100vh;
margin: 0;
}
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
}
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
<div id="info-header">
<span>some text here...</span>
</div>
Add css property text-decoration: underline
You should use text-decoration property.
In your case its:
text-decoration: underline;
You can also use text-decoration for overline and line-through read about CSS text-decoration Property
You can change the display value for an another block level.
html {
background: lightgray
}
#info-header {
font-size: 40px;
/*text-align: center;
margin:100px 10px 10px 10px;*/
display: table;/* shrinks on content */
margin: 10px auto;/* margin:auto instead text-align for this block */
font-family: Poiret One;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
codepen
Give the <div> a fixed width and give it a {margin: 0 auto} for centering
body {
background: #131418;
text-align: center;
}
#info-header {
font-size: 40px;
margin: 0 auto;
width: 300px;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">this is a nice title</div>
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.