I would like to wrap the text inside a div container, but I don't want words to be cut at some "random" character.
I have tried with style="word-wrap: normal", but that only works in IE, not in Firefox. When using style="white-space: some option", words get cut at unwanted points. For example the word "reason" is shown as "reas" at the end of the line and "on" at the beginning of the next line. Using the option "nowrap" is not ok, because the text exceeds the margins of the div container.
<div style="text-align: justify;">I agree, fully and voluntarily, to participate in this research study. With this, I retain the right to withdraw my consent, without having to give a reason for doing so.</div>
I would like that word wrapping occurs at the end of each line, if the space is insufficient for the whole text inside the div container. But I also want words to be sliced in a grammatically correct way or not sliced at all: simply show the word that does not fit at the end of the line in the following line.
This is the situation right now:
It looks like your CSS is set to use word-break: break-all. If you change / override it to use word-break: normal then it won't happen anymore.
Demo:
div { width: 190px; background: #ffc; }
#div1 { word-break: break-all; }
#div2 { word-break: normal; }
<div id="div1">
Without having to give a reason.
Without having to give a reason.
Without having to give a reason.
</div>
<br>
<div id="div2">
Without having to give a reason.
Without having to give a reason.
Without having to give a reason.
</div>
Not sure, if you tried this, but the answer may be to simply increase the size of the border
border-width = //put a value here
Related
I want inline icons to "stick" to their associated text, and to this end I am using U+2060 WORD JOINER to "join" the icon and the word following it.
The word joiner does not produce any space and prohibits a line break at its position.
This should ensure that, even with line wrapping, the icon doesn't get left stuck on its own at the end of a line. But it's not working (at least for me, on latest Chrome).
body {
font-family: 'Meiryo', 'Verdana', sans-serif;
line-height: 1.5;
}
#test {
width: 200px;
border: 1px solid black;
}
#test img {
vertical-align: bottom;
}
<p id="test">You obtained a <img src="//via.placeholder.com/24" />MacGuffin!</p>
While I'm aware I could achieve this effect with HTML, such as using <nobr>, <span style="display: inline-block">, <span style="white-space: nowrap"> or several others, I would like to avoid adding HTML in this case. Mostly because, if the item name is more than one word, I still want the item to be able to wrap. I just want to ensure that there is no line break between the icon and the first word after it.
I could've sworn this used to work, so I don't know if it's an update to Chrome that broke it or I'm just remembering wrong. Or maybe it was never supposed to work? EDIT Can confirm it used to work January 16th 2020, as per my excited message on Discord telling my friends about it.
hope this will do the trick:
It seems to work with any width I set the container to and will stay connected to what ever foo will be.
it-helped-me
I have a some kind of smaller side container, #sideNavContainer, in a parent div, on the other side (to the right) is another div for the content.
When I put text into the #sideNavContainer that contains very long words without spaces, the words begin to break out of the container and overwrite stuff on the right side (content area).
I tried to force the content of the #sideNavContainer to break up those words, so that they continue on the next line, when they reach the right end of the container but I am not 100% satisfied as I expected that the words/sentences should also be broken on spaces preferably. Long words should start on the next line and then be broken down and not begin on the same line as the other text (after a space) and then continue (but be broken).
Here is some example to hopefully illustrate what I mean:
<div>
<div id="sideNavBox">
<span>Navigation and other Stuff</span>
<div id="subContainer">
I am a very long Text andIevenContainVeryLongWordsWithout spaces but my parent container(s) should not ChangeTheirWidthBecauseOfThis and break whenThereAreSpaces but longWordsWithoutSpaces shouldBeBrokenDown.
</div>
</div>
<div id="contentBox">
Hello, I am the main content
</div>
</div>
CSS:
body {
background-color: green;
}
#sideNavBox {
float: left;
margin-left: 20px;
width: 180px;
background-color: blue;
}
#subContainer {
background-color: grey;
word-break: break-all;
}
#contentBox {
background-color: yellow;
}
Fiddle: https://jsfiddle.net/qp74uxkt/11/
My desire/expectation was that the text would break after the words "I am a very long Text", then on the next line continue with "andIevenContain..." and this long word then can be broken at the end of the available space, based on the restrictions of the parent container. This also does not work when I use "hyphens: auto;". Can this even be done?
You can set word-break property as break-word. I have updated your code and created a new fiddle. I think it will solve your problem
Check it out https://jsfiddle.net/yvLb6zer/
If the amount of long words is not too large, I would recommend not to use any word-break setting, but instead insert "soft hyphens" into these long word, at positions where it's grammatically correct.
A soft hyphen is an entity that looks like this: . So if you have for example whateverwonderfullongword, you could change that to whateverwonderfullongword. If it fits into the width, it will be written as a whole, if not, if not, it will break (with a hyphen) at the latest possible position of a entity, like in the following example.
<p>whateverwonderfullongword whateverwonderfullongword whateverwonderfullongword whateverwonderfullongword whateverwonderfullongword whateverwonderfullongword whateverwonderfullongword whateverwonderfullongword</p>
I need to display text vertically in a rowspan within a table. The technique I'm using via CSS seems to "work", but the width of the <p> element can't be changed or else the text wraps to the next line and its not pretty.
Take a look at this jsfiddle I put together in order to replicate my issue.
http://jsfiddle.net/wn4ofcwx/
Any alternatives here? Or possible a fix to my current CSS.
Note: Probably doesn't matter but I'm using the INK Framework (similar
to bootstrap).
Actually I figured it out, it was as simple as using white-space: nowrap;
Which I completely forgot about!
http://jsfiddle.net/wn4ofcwx/7/
The text doesn't wrap because we are explicitly stating nowrap, you can re size the window to see how it keeps its position, now I can apply a width of just 10px to take away all that excessive white space in the rowspan.
Check this out: http://jsfiddle.net/wn4ofcwx/4/
What I added to the class .rotate-vertical:
display: block;
margin: auto auto;
height: 17px;
And I took out : Width: 50px;
Cheers
Actually you can keep out the : display: block;
The p element is already a display: block by default and you didn't overwrite it anywhere.
I am having a weird problem , either I don't know how <br/> works or I am missing something here.My paragraphs have line height of 24px. I want to have a line break (empty line) between the text but when I use <br/> tag it creates an empty line with too much space (36 px) according to paint.net so what I am doing wrong?
Isn't line break supposed to have same height as line-height property? If yes why isn't that working and if not then what is the solution?
<p>
Greenfields Counselling and Psychotherapy is a counselling practice that lives and works out of the principles for counselling and psychotherapy as set down by Carl Rogers.
<br/>
<br/>
Counselling at Greenfields is strictly confidential and we understand that this can be a difficult time for you.
</p>
Here is the css:
p {
line-height: 24px;
}
Here is the demo: http://contestlancer.com/greenFields/?page_id=41
Look at the space after the word happen.
Ahmar.
Seems perfectly fine to me... if you get rid of one of the <br>s I measured distance between "facilitate"'s f and "Counseling"'s C to be 13px. If I put it back in again it is 37px.
37px - 13px = 24px = the line-height you set = everything is okay ;)
(measuring done via Greenshot ;))
So if you are not satisfied with the height of your <br> you should add a special condition for that to your css:
br
{
line-height: <desired_value>;
}
PS: So to clarify further, line-height is not the same as the space between two letters in two lines...
You can remove that line-height spacing by this technique.
br{
display: block;
height: 0;
}
demo
The <br /> tag is for line breaks. You can use the CSS line-height property to control distance between lines, if you want to look at it that way.
for large distances between lines, is better to use <p> tags for every line, in which you can control the height.
jsfiddle.net/efortis/f6ju2/
First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.