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*/
}
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'm working on a site wich has filters on category pages - http://www.purrfectlyyappy.com/fun-and-games/dog-toys
The filter is on the left hand side, but the text in the filter appears under the products when it's too long, is there a way i can set it to break onto a second line if the name is too long?
Seem like it should be easy, but i've been struggling on this!
This is happening because there is a css in you page
.hikashop_filter_checkbox {
white-space: nowrap;
}
Above css is already applied on your html page which is forcing elements to come in single line.
You can either remove this css and if not then use following css in label
.hikashop_filter_checkbox label{
white-space: normal;
}
Use the overflow property.
enter link description here
Here, adding :
overflow : scroll;
will make the "too long text" in a scroll area. There are many other values.
Consider:
As shown in the above image, the exceeding words need to hide and dotted line needs to show. How can I do this word wrapping in CSS and AngularJS?
You can use the text-overflow style available in CSS:
text-overflow: clip|ellipsis|string|initial|inherit;
Use ellipsis to trim the word and show dots.
See Word wrapping in CSS.
Just use a class for the clipping and apply it with 'ng':
.is-clipped {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
}
To make the text cut off with ellipses when it overflows the container, with CSS you need to apply several properties to your container (in this case <p>):
text-overflow: ellipsis;
This is what defines the actual display (the ellipsis, or the dotted lines the way you called them).
Here is the list of all possible display types: text-overflow: clip|ellipsis|string|initial|inherit;
overflow: hidden;
This tells the content to cut-off when it overflows. If you don't set this, the text will simply display in full, without cut-off.
Other options are: overflow: visible|hidden|scroll|auto|initial|inherit;
width:
You need to set the vertical limit of the container, i.e. the point when the content needs to cut-off. Since you are using ellipses, you need to factor this into the width.
Important: For the content to cut-off, the container needs to be a block or inline-block element (e.g. no display: inline) and width needs to be applied in px, not in %.
white-space: nowrap;
This tells content that it should not wrap when it reaches the container limit set in step 3. If you don't set this, the content will simply wrap to the next line, and none of the text-overflow will apply.
All possible white-space values are: white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
Note: This will cut the text off at the point where the container ends, which will sometimes result in not so nice language syntax issues (e.g., words cut off mid-way, or a space between the last word and the ellipses).
Filter
app.filter('ellipsis', function() {
return function(text, length) {
if (text && text.length > length) { // If it is not null then check length
return text.substr(0, length) + "........";
}
return text;
}
});
Use this filter in the view as:
<span ng-bind="post.post_content | ellipsis:200"></span>
To do it in CSS, you can use the ellipsis property. Please visit CSS text-overflow Property (W3Schools).
Following is my code:
http://jsfiddle.net/Ry9Lu/
In this code, Short Text does not have any problem , but when Long Text, my <img> will not able to see due to <td> expanded over it.
The problem is because inside my <img> tag there is width="95%" style, but this style is necessary for me, because I want to control the size of <img>.
Even though I apply a CSS for word break also does not help
p.Description
{
word-wrap:break-word;
}
My expected result is no matter how long the text, the image will always at that size.
Please advice how should i do that.
i think this is what you need
only css i added :
p#pDes {
width:100%;
background-color:grey; /* this is just to highlight the area */
word-break: break-all;
}
Note : you have broken tags, though its not affecting the view, but close all <p>...you misplace </p> with <p>.....looks bad on html view source!
I'm trying to show boxes of people's names.
The problem is that these names can get pretty long, and with a fixed width box, crazyness is sure to ensue. Long spaced text breaks, causing problems on new rows (http://jsfiddle.net/9MhWW/) and disabling line-breaks with white-space: nowrap; will overflow the box (http://jsfiddle.net/9MhWW/1/).
Working with line breaks seem like the best option. If you agree, that begs the following question: Is there a way to make sure the row-problem doesn't occur without losing part of the text, having a div for every row or giving the paragraph a fixed height?
If just one row is ok for you, set a overflow: hidden:
p { overflow: hidden; }
A nice effect will be using ellipsis to replace the overflowing text with ...:
p { overflow: hidden; text-overflow: ellipsis; }
See this update to your fiddle.
I think I have come up with a solution. So bootstrap adds loads of stuff in to make it look nice of course, but in your case we have to undo some of that. So we have to get rid of the float left and replace it with display inline-block:
.span2{
float: none !important;
display:inline-block;
}
See the fiddle update. I had to change the text alignment to match what you had previously.