i currently have a problem with line breaks in my header element. The headline shouldn't wrap into the image, but I also don't want it to wrap without a hyphen. I don't want the copy editors to make the word-breaks themselves with html. I would like to have an overall solution built with css.
Here is a codepen of my code
I already tried these:
line-break: anywhere;
line-break: normal;
line-break: loose;
line-break: strict;
word-break: break-all;
word-wrap: break-word;
Thank you so much in advance! :-)
so as there is sadly no way to implement the automatic CSS hyphenisation when you want your Site to be used with Chrome Browsers, i recommend using viewports to change the Font-Size or make the Font-Size somewhat responsive.
Easy solution with responsive Font-Size (it's a workaround that is a bit weird in my eyes but it does keep the Text in the same format):
HTML:
<!--Set the breakpoint in html-->
<h1>
<span class="line">You are</span>
<span class="line">remembered</span>
</h1>
CSS:
/*add css for the intended break*/
.line{
display: inline-block;
margin-bottom: 0.3vw;
}
h1 {
font-family: "Space Grotesk", sans-serif;
color: $color-highlight;
margin-bottom: 0;
/*Set a responsive Font-Size*/
font-size: 6vw;
line-height: 80px;
}
For the viewport solution just check a basic tutorial for responsive design like THIS
There you can define the behavior depending on the screen size.
I have an issue while using custom font(poppins-regular.ttf). The issue is when I set background-color for span tag which is wrapper of text.
The words like g,y,.. etc got cut at the bottom. But, If I change the font-family from poppinsRegular to tahoma it looks good.
But the real issue here is i need to maintain same line-height
.passageBody, .passageBody2 {
width: 414px;
padding: 10px 0;
margin: 0px;
font-size: 24px;
line-height: 32px;
font-family: 'Poppins', sans-serif;
}
.passageBody2 {
font-family: tahoma;
}
.highlightPhrase {
background-color: yellow;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="passageBody">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
<hr/>
<div class="passageBody2">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
Example jsFiddle link here...
You can either remove the line-height property or try to set it in em units.
line-height: 1.5em;
Edit 1
If you don't want to change line-height, use vertical align with inline display
.highlightPhrase {
background-color: yellow;
display: inline;
vertical-align: text-bottom;
}
Edit 2
The above code might have visually changed the line height. So this example might be an elegant solution to your problem. Just wrap the content in another element and set the position to relative, so that background of each line will not hide the above line.
.highlightPhrase span {
position:relative;
}
or you can use some small image as background and repeat it to highlight entire text.
Problem here is the vertical placement of the glyphs.
Designer decided to set the font glyphs like that.
So, basically designer decided how much space there is below the baseline, and how much space is above the height of uppercase letters. Typically these spaces are equal, but they don't need to be.
I think that only solution for you is to put bigger line-height on the paragraph that is using that font or just choose a different font.
Change:
line-height: 32px; to line-height: auto;
Try this
.highlightPhrase {
padding:5px;
}
I've got a button with some text in it, and the text is too long for the button so it's wrapping automatically to the next line. As I have a fixed button height, the second line of text in the button is hidden since overflow is not set to visible.
example
Is there a way to set the button to change its width and make it as long as the text inside?
My current css:
.block .btn {
background-color: #464646;
color: #fff;
border:none;
height: 30px;
font-family: 'Segoe UI';
font-size: 16px;
cursor: pointer;
}
.block .btn:hover{
background-color: rgba(40, 40, 40, 255)
}
EDIT:
Found my problem: there was some leftover styling for width set in the style="" property of the actual button in the HTML. There weren't any issues in the CSS itself. Thanks for the answers anyway!
Its a little hard to say exactly without more CSS or HTML provided...but this may be due to white space wrapping, try setting white-space to nowrap on the button
e.g.
button{
white-space:nowrap;
}
per MDN
The white-space CSS property is used to to describe how whitespace
inside the element is handled.
You're fixing the height of the button. Try using min-heightinstead in case the text needs more height.
I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:
My HTML looks like so:
<div class="submenu">
<h3>Destinations in Europe</h3>
<ul>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
</ul>
<h3>Features</h3>
<div>
<img src="/assets/images/o/menu/city-feat-one.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
</p>
</div>
<div>
<img src="/assets/images/o/menu/city-feat-two.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
</p>
</div>
</div>
My CSS:
#rb-menu-com li .submenu > div {
width:48%;
float:left;
position: relative;
}
#rb-menu-com li .submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
}
#rb-menu-com li .submenu div img {
border:1px solid #fff;
}
Has anyone experienced this before? I haven't!! Driving me mad!
Give this style to the <p> tag.
p {
word-break: break-all;
white-space: normal;
}
Word wrapping only occurs when there is a word break.
If you have a "word" that is as long as that, then there is no place for it to break.
The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).
Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.
p { word-break: break-all }
(Note browser support).
Alternatively, you can use overflow to truncate the text if it won't fit in the container.
To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.
That is because you have continuous text, means single long word without space. To break it add word-break: break-all;
.submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
word-break: break-all;
background:red;
}
DEMO
This is not an answer to the question but as I found this page while looking to an answer to a problem that I had, I want to mention the solution that I found as it cost me a lot of time. In the hope this will be useful to others:
The problem was that text in a <p> tag would not fold in the div. Eventually, I opened the inspector and noticed a 'no breaking space entity' between all the words. My editor, vi, was just showing normal blank spaces (some invisible chr, I don't know what) but I had copied pasted the text from a PDF document. The solution was to copy a blank space from within vi and replace it with a blank space. ie.
:%s/ / /g where the blank to be replaced was copied from the offending text. Problem solved.
This is a little late for this question but others might benefit.
I had a similar problem but had an added requirement for the text to correctly wrap in all device sizes. So in my case this worked. Need to setup the view port.
.p
{
white-space: normal;
overflow-wrap: break-word;
width: 96vw;
}
You can use word-wrap to break words or a continuous string of characters if it doesn't fit on a line in a container.
word-wrap: break-word;
this will keep breaking lines at appropriate break points unless a single string of characters doesn't fit on a line, in that case it will break.
JSFiddle
The solutions is in fact
p{
white-space:normal;
}
You can change the break behaviors by modifying, word-break property
p{
word-break: break-all; // will break at end of line
}
break-all: Will break the string at the very end, breaking at the last word
word-break: is more of pretty brake, will break nicely for example at ? point
normal: same as word-break
If the desired result is to break the line by complete word use:
p { word-break: break-word; }
else you can use:
p { word-break: break-all; }
EASY
p{
word-wrap: break-word;
}
Adding width: 100%; to the offending p element solved the problem for me. I don't know why it works.
For others that find themselves here, the css I was looking for was
overflow-wrap: break-word;
Which will only break a word if it needs to (the length of the single word is greater than the width of the p), unlike word-break: break-all which can break the last word of every line.
overflow-wrap demo
add float: left property to the image.
#rb-menu-com li .submenu div img {
border:1px solid #fff;
float:left;
}
Newbie Q here: How can I add a linebreak in a custom header style?
h21
{
font-size: 1.52em;
/*Equivalent of a line break here...????*/
}
You cant add a linebreak in a class declaration, but you can add margin-bottom or padding-bottom: -10px or similar varieties. You can use firebug to measure how high a linebreak on your page appears and use that value for padding or margin -bottom.
h21 {
font-size:12.1px;
padding-bottom: 30px;
display: block;
}
you can use the word-wrap property. see here
an example:
h21 {
word-wrap: break-word;
}
obs: the container element should have a width