Currently have a textarea that receives a message and displays it to a user.
However currently when it receives it, if the message is longer than it's border, it keeps displaying the text on one line outside the right hand border.
I would like the text to start on a new line when it reaches the border. How can I do so?
Below is the current code for the text area.
Text area:
echo form_textarea(array('name'=>'name','rows'=>3,'cols'=>100,'wrap'=>'hard','value'=>""));
width: 50px; word-wrap: break-word; should do the trick, of course set your own width
Related
I have a table of items which has description field. When listing out all items I would like to show exactly three rows of text followed by "..." if the text is longer.
I can do something like
<style>
.box {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
height: 60px;
}
</style>
...which works fine when there is a lot of text and the text is split in several lines. But if I have no new line chars in text I see only one line of text which is shortened.
Also if I have text formated like
Something
//blank-line
//blank-line
I am writing about something, because something is not nothing
I get my three lines...but it looks bad because first line is only "Something", and the two other are blank. So I figured I'd have to pre-format it before I send it from controller to view, and I tried first to approach that problem by removing empty lines and connecting whole text to one line, however this does nothing
$description = preg_replace( "/\r|\n/", "", $array[0]->description);
return $description
Which is maybe excepted since HTML formatted text enters the database
<p class="MsoNormal">Something<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Blah blah...something else...
Does anyone have an idea how to solve this?
Naturally, text will flow to the next line when it reaches the edge of its container element in the browser. I assume your container's width is controlled by some styling (whether fixed or responsive).
So in your case I'd ditch the ellipsis styling, see (from physically looking in the browser) how many characters it takes to produce the 3 lines you desire, and then do (I also assume you don't want to keep the HTML):
$description = strip_tags($array[0]->description);
if (strlen($description) > $maximumLength) {
$description = substr($description, 0, $maximumLength) . "...";
}
return $description
Of course there are other ways to do it on the client side with CSS or JavaScript, but what I see on most sites is they settle on a fixed length for their excerpt and just say any text longer than x characters must be truncated.
I am using php to output and exerpt inside a p tag.
I am then wrapping the inside string of the p tag with a span.
<p class="lead"><span><?php the_advanced_excerpt(); ?></span></p>
The outputted html...
<p class="lead"><span>Motorcycle helmet Full face or open face. A motocross or enduro style helmet is a better choice. These are specifically designed for off-road use and have particular…</span></p>
The span then has this css on it...
.carousel-caption .lead span {
background: #F60;
padding: 5px;
}
Please see the out come here...
See the green arrows - where it looks as desired.
See the red arrows - where padding is missing.
As you can see the orange high lighted lines are flush at the end of each line. Apart from the beginning and the end of the string.
So my question is how can I add left/right padding to each of the lines?
So it appears that each line has been highlighted with a background colour. Like plastic tape that you get embossed letters on.
Is this posible somehow?
Add "display: block" or "display:inline-block" to span's class
Unfortunately I do not think it is possible, and this is why:
span is always inline like this, so padding adds an extra 5px on the top, bottom, left, and right. Now your middle lines are not the beginning or the end because they are one line, so padding does not read for them.
You can set a background with display:block but you want a "highlighted" effect, which is not what display:block will give
I want to close out my old question start a new one with a better sample photo.
I am trying to add a transparent png background to some dynamic text with line breaks and give it 15 px padding at the end of each sentence when the line breaks. But this text does not have the br tag in the html code. I don’t want the background to be a square box. I uploaded a sample of what I have and what I am trying to get. I heard there is a php script that can count characters like strlen, count_chars, substr_count. Can anyone help me. My css is below. It’s a span tag around dynamic text that changes. This is a Drupal Views Slideshow and it changes every few seconds, the photo and the text.
Below is the code in Drupal Views I used Tokens for the text that needs the padding the Token is called 'text'.
.bluebackground
{background-image:url(images/transparentback.png);}
<div id="textbox">
<span class="bluebackground">[text]</span>
</div>
I'm not sure why you would need PHP, instead just use CSS.
.bluebackground {
background-image:url(images/transparentback.png);
padding: 15px; /* add 15px padding around entire box */
}
I have an image as the background for an input field. I can set the line-height and font-size easily but when you click inside the input, the cursor line is way outside the background image.
Is there a CSS statement (Is that you call them?) that controls this?
You're probably using line-height to display the text in the input as vertically centered. However, it is also the culprit of your issue. Try experimenting with padding settings of the input instead, while leaving the line-height set to normal.
Problem with using padding is that it is displayed inconsistently in different browsers while line-height in input text areas are displayed equally in IE7, IE8, IE9, Safari, Chrome, Firefox and Opera. It's seems like you have to choose between input cursor or input text vertical alignment.
Yes, line-height.
Try:
input {height: 28px; font-size: 10px; padding: 7px 5px;}
The post Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS may help you.
It seems that your padding size affects the cursor size and position.
Will be good if we have the code , you also can try
background:url("yourimage") right top no-repeat;
font-size:12px;
padding:5px 5px;
line-height:normal;
depends of your images size
Using a line-height: normal or a line-height:inherit did the trick on my side.
Thanks for your answers guys.
the text in input tag can be vertical centered automatically, do not use line-height on it.
I have saved input from a textarea element to a TEXT column in MySQL. I'm using PHP to pull that data out of the database and want to display it in a p element while still showing the whitespace that the user entered (e.g. multiple spaces and newlines). I've tried a pre tag but it doesn't obey the width set in the containing div element. Other than creating a PHP function to convert spaces to   and new lines to br tags, what are my options? I'd prefer a clean HTML/CSS solution, but any input is welcome! Thanks!
You can cause the text inside the pre to wrap by using the following CSS
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Taken from this site
It's currently defined in CSS3 (which is not yet a finished standard) but most browsers seem to support it as per the comments.
You could just use PHP's nl2br function.
You've got two competing requirements. You either want the content to fit within a certain area (ie: width: 300px), or you want to preserve the whitespace and newlines as the user entered them. You can't do both since one - by definition - interferes with the other.
Since HTML isn't whitespace aware, your only options are changing multiple spaces to " " and changing newlines to <br />, using a <pre> tag, or specifying the css style "white-space: pre".
Regarding the problem with the div, you can always make it scroll, or adjust the font down (this is even possible dynamically based on length of longest line in your server-side code).