When I insert text dynamically with java (we are using .jsp), the paragraph gets extended across the border of the div, although it is perfectly fine if I copy paste the text inside. It is not an issue of white-space. The other example is what happens if I just manually copy the text in the developer's tools or use a static text.!
Break up the words in your sample text with some spaces or add the following to your style sheet:
p {
word-wrap: break-word;
}
Try this:
.class
{
max-width: 100px; /*or whatever*/
word-wrap: break-word;
}
Reference
Related
I have an textarea element that contains a list of strings. I've written some CSS to highlight the first string (line).
However, this doesn't work well when a long word appears that wraps to a new line:
#example:first-line {
background-color: #BA2F00; /* BazFoo */
color: #F00BA2; /* FooBaz */
}
textarea #example {
word-wrap: break-word;
}
<textarea id="example" style="width: 200px; height: 100px;">
ThisIsALoooooooooooooooooooooongWord
</textarea>
The question is, how do I highlight the entire wrapping first line (i.e. ThisIsALooo...ongWord) using CSS?
unfortunately, there's no pseudo attribute for first word... you may have to use Javascript to accomplish this. CSS to select/style first word
To do this with Javascript, think about the whole text inside the text area as an array of words, and take the index 0, add a span with a style.
take out the first-line in #example:first-line, just leave it as
#example
oh yah and also add the word-wrap:break-word in the # example, it's easier like that.
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'm looking to have a scroll effect (left to right) on text placed inside code tags within a pre tag. I've tried the overflow: scroll attribute without success. An example is this:
<pre><code>
var text = 'This is a bit of longer text that ends up wrapping around and messing up the rest of the formatting.';
var object {
text: text,
key: 'A second key with some more really long text that will overflow onto the next line',
}
</code></pre>
What style do I need to give to my code element to allow the text to wrap without effecting the formatting of the code? Ironically code in stack overflow has the effect I'm looking for though I can't seem to replicate it.
*I've updated the question to add that the code is in a pre tag which preserves line breaks and formatting.
Here is a simple and good example on how to do it !
HTML
<div class="code-holder">
<code>
ar text = 'This is a bit of longer text that ends up wrapping around and
messing up the rest of the formatting.';
</code>
</div>
CSS
.code-holder{
width: 560px; /* your prefered width */
overflow-x: scroll;
height: 60px;/* Your prfered height*/
}
.code-holder code{
white-space: nowrap; /* this rule is important*/
}
I have HTML table where the content of the cell is placed using some templating engine. I have to make sure that the cell should have fixed width no matter how big or small the content is.
<td align="left" height="50px">
<a href="#" style="padding-left:5px; display:block; line-height:18px;">
Traditional Dhow Cruise Dinner in Dubai Creek International Ho...</a>
</td>
case 1: If the content is small(solved).
Then this problem can be solved by having fixed width to the cell.
case 2: If the content is big.
I should make sure all the words that can be fit inside the cell is filled and then after at the end '...' is printed.
I have tried counting the characters in the string used the template engine to place <...> after it exceeds the character count. But this does not seems to be working as HTML breaks a string depending on word. Hence sometimes even my 140 characters(limit) getting exceeded the fixed height of the cell.
I don't mind using any templating engine to generate the desired output. Please help.
Try adding text-overflow:Ellipsis to anchor tag;
change anchor styling to:
padding-left:5px;display:block;line-height:18px;height:50px;width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
Info
Add this to your css
td a{
word-break: break-all;
width: 150px;
height: auto;
}
Have a look at Clamp.js. This library "Clamps" content inside an HTML element by adding ellipsis. It works in all browsers.
var module = document.getElementById("html element");
$clamp(module, {clamp: 3}); //Clamp into three rows
or you can make it automatic clamping $clamp(myParagraph, {clamp: 'auto'}); or $clamp(myParagraph, {clamp: '35px'}); into a given height.
word-wrap: break-work
is another option for doing so.
td a{
word-wrap: break-work;
width: 180px;
height: auto;
}
word-wrap: break-word
recently changed to
overflow-wrap: break-word
will wrap words exceeding, onto the next line.
adjusts words so that they do not break in middle.
word-break: break-all
irrespective of continuous word or many words, breaks them at the edge of the width limit.(even within the character of same word)
But I think you need to truncate(...) the word which exceeds the td cell length, so for this you can use
td a{
white-space: nowrap; //keep all text on one line
overflow: hidden; //prevent the text to shown outside border
text-overflow: ellipsis; //cut off text that exceeds border with an elipsis
}
I have crafted a webpage. It has many words enclosed in spans and h3 tags. Now I am trying to put some symbols at the end of text on the same line using CSS class. I can do this with class something like below using background-image property:
.newtohtml5{
width:fit-content;
background-image:url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
background-repeat:no-repeat;
background-size:2%;
background-position-x:right;
}
However the problem with this class is that the HTML5 symbol appears at the end of the line leaving huge space between the text and symbol itself. I want that symbol appear exactly after the text in the span on the same line, not at the end of the line having huge space between the text and the symbol.
I will not like to make any changes to HTML. Though any solution is appreciated. But CSS only trick will be great.
Assuming you don't require full cross-browser support, and are okay using only those browsers that implement CSS3 generated content and you want that generated content to appear immediately after the text contained within the span, you can use the ::after pseudo-element:
<span class="newtohtml5">text here</span> <br/>
With the CSS:
.newtohtml5::after {
content: ' (generated content).'
}
JS Fiddle demo.
It's worth noting that this generated content is after the content of the span, but still within, and a part of, the span itself.
You can also use attributes of the element to include in the generated content, for example, with the following CSS you can include the string contained within the class attribute:
.newtohtml5::after {
content: ' (.' attr(class) ').';
}
JS Fiddle demo.
You can also insert images into the content property:
.newtohtml5::after {
content: url(http://lorempixel.com/25/25);
margin-left: 1em;
}
JS Fiddle demo.