Asked  2 Years ago    Answers:  5   Viewed   60 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

1

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
 
1

see this fiddle

var cnt =  $(".tweeter_widget").text().length;
if (cnt > 10) {
    $(".tweeter_widget").css("line-height", "5px"); 
} 

ie:if more than ten characters in the div containing the Tweet, change the line-height.

Thursday, August 18, 2022
 
1

Autopair is the best one of these tools

Monday, December 19, 2022
 
5

I have managed to fix this by doing something that feels unnatural and hacky:

function fadeIn (elem, fn) {
  var $elem = $(elem);

  $elem.addClass('is-animating');
  $elem.removeClass('is-hidden');

  // Smelly, setTimeout fix
  setTimeout(function () {
    $elem.removeClass('is-hiding');
  }, 0);

  $elem.on(transitionEndEvent, function () {

    $elem.removeClass('is-animating');

    if (typeof fn === 'function') {
      fn(); 
    }
  });
}; 

Adding the setTimeout function to the class that contains the transition-able property fixes the issue.

Working code here: Codepen fixed code

Monday, October 10, 2022
 
2

Based on this question

Input boxes with transparent background are not clickable in IE8

I added an IE only background image:

<!--[if IE]>
<link href="css/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->

containing

background-image:url(../g/spacer.gif); 

This resolved the issue.

JG

Thursday, November 3, 2022
 
hunzter
 
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 :
 

Browse Other Code Languages