JQuery mobile multiline button override issue

JQuery mobile multiline button override issue

I'm using Phonegap and JQuery mobile to create an app that uses button
whose content (caption) is fetched via an ajax request and can be pretty
long, so I wanted to have multiline buttons. I searched and found a way to
do so by using the following css :
.ui-btn-inner{
white-space: normal !important;
}
But I can't get it to work.
I have tried to put it between style tags in the head of my page, then
inside the html code of the button itself using style='' . I also tried to
put that piece of code in a css file and link it to the page but it
doesn't work either, even if I put this file in the same folder than my
HTML.
Here is an extract of my JS where I create the button :
for ( var i = 0; i < quizz.questionnaire[index_quest -
1].propositions.length; i++) {
if (quizz.questionnaire[index_quest - 1].fin) {
if (i + 1 == quizz.questionnaire[index_quest - 1].reponse) {
code_source += "<a href='pageFinQz.html' data-role='button'
onclick='localStorage.localScore=++score'>";
code_source += quizz.questionnaire[index_quest -
1].propositions[i];
code_source += "</a><br/>";
} else {
code_source += "<a href='pageFinQz.html' data-role='button'>";
code_source += quizz.questionnaire[index_quest -
1].propositions[i];
code_source += "</a><br/>";
}
} else if (i + 1 == quizz.questionnaire[index_quest - 1].reponse) {
code_source += "<a href='#' data-role='button'
onclick='mapQuestion(quizz, ++index_quest);
localStorage.localScore=++score; return false' rel='external'>";
code_source += quizz.questionnaire[index_quest - 1].propositions[i];
code_source += "</a><br/>";
} else {
code_source += "<a href='#' data-role='button'
onclick='mapQuestion(quizz, ++index_quest); return false'
rel='external'>";
code_source += quizz.questionnaire[index_quest - 1].propositions[i];
code_source += "</a><br/>";
}
}
And the head of my HTML is :
<meta http-equiv="Content-Type" content="text-html" charset="UTF-8"/>
<link rel="stylesheet" type="text/css"
href="../lib/jqm/jquery.mobile-1.3.0.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="../lib/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../lib/cordova-2.4.0.js"></script>
<script type="text/javascript"
src="../lib/jqm/jquery.mobile-1.3.0.js"></script>
style.css is in the same folder than my HTML and contains exactly :
.ui-btn-inner{
white-space: normal !important;
}
I don't really understand why the css seems to not work since it's pretty
simple, but maybe I missed something obvious.
Thanks in advance for your help.