php

javascript

jquery

css

Wrapping long text in CSS

Viewed 64 times

I have text like

<div style="float:left; width: 250px"> PellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesque  feugiat tempor elit. 
Ut mollis lacinia quam. Sed pharetra, augue aliquam   ornare vestibulum, metus massalaoreet tellus, eget iaculis lacus ipsum et diam. </div>

I do not want horizontal scrolling. Is it possible to wrap the text (auto-line break). I know there are some IE specific properties.

Thank you for your time.

UPDATE: I can use jQuery, Javascript, PHP to do this also. but how? I mean the letters (font) are not fixed width or whatever you call that.

Answers

I use the combination

word-wrap: break-word;
overflow: hidden;

to deal with this. The word-wrap setting will allow the word to be wrapped despite its length in browsers which support that property, while the overflow setting will cause it to be cut off at the end of the available space in browsers which don't recognize word-wrap. That's about as graceful of degradation as you're likely to get without going to javascript.

Thursday, October 13, 2022

sival

HMAC is a standard. So is SHA-256. So their outputs, regardless of which implementation, has to be the same.

There could only be differences in the Base64 encoding. Normally, the non-alphanumeric characters are + and /, but you cannot count on that. I've checked, and both implementations use the same non-alphanumeric characters.

However, you should still "manually" check a few thousand strings. The implementation in PHP is well tested. But I do not know if the same is true for the implementation in jQuery...

The syntax for Base64 encoded output is:

Crypto.util.bytesToBase64(
    Crypto.HMAC(Crypto.SHA256, sign, accessKey, { asBytes: true })
);

Thursday, October 27, 2022

shellster

you have to look at the ReverseAJAX or COMET methodologies.

As per wikipedia

Reverse Ajax refers to an Ajax design pattern that uses long-lived HTTP connections to enable low-latency communication between a web server and a browser. Basically it is a way of sending data from client to server and a mechanism for pushing server data back to the browser.

EDIT:

i suggest you to implement the following approach, this is simple to implement. I take answering as an example.

After the answer page load complete. Initiate a AJAX request (Asynchronos, so it wont block the UI)
And it will look for any new updates on the server side (polling the DB to check if any new answers added)
And return the data only to browser, if there is an update. otherwise stay calm.
After returning the data to client, client should invoke the another AJAX request and wait for the updates.
Repeat step 2 to 4 for the rest of the page life time.

Hope this helps.

Sunday, December 25, 2022

jacott

Autopair is the best one of these tools

Monday, December 19, 2022

tom_stratton

I'm not quite sure about your code,
here is an example with a long tool-tip value:

Element:

 <a href="#" rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a>

Js:

$(document).ready(function () {
  $("a").tooltip({
    'selector': '',
    'placement': 'top',
    'container':'body'
  });
});

Css:

/*Change the size here*/
div.tooltip-inner {
    max-width: 350px;
}

Demo: on JsBin.com

Apprently you can only change the .tooltip-inner in Bootstrap 4, thanks @Felix Dombek

.tooltip-inner { max-width: ... }

Saturday, August 27, 2022

tomislav_turcic

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

php

javascript

jquery

css

Wrapping long text in CSS

Answers

php,javascript,jquery,css