Asked  7 Months ago    Answers:  5   Viewed   30 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

64

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.

Wednesday, March 31, 2021
 
wavyGravy
answered 7 Months ago
77

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.

Saturday, May 29, 2021
 
ChronoFish
answered 5 Months ago
25

Autopair is the best one of these tools

Sunday, August 8, 2021
 
Georges Dupret
answered 3 Months ago
12

Is this what you are trying to do ?

select {
  text-align: center;
  text-align-last: center;
  /* webkit*/
}
option {
  text-align: left;
  /* reset to left*/
}
<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="ADULTS*">ADULTS*</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>
<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="ADULTS*">ADULTS*</option>
  <option value="1" selected="true">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

This is partially supported by browsers (issues, at least, in Edge and Safari)

Monday, August 9, 2021
 
bimal
answered 3 Months ago
47

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

Saturday, August 14, 2021
 
maciekm
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :