<p> listview 内的标签在 jquery 移动设备中自动设置文本

Question

我正在使用 jquery 移动版 1.4.5 的列表视图。我想在 <li> 中设置 <p> 以根据宽度自动设置描述文本，但现在它不会自动设置，而是添加省略号。

这是一个代码：

<ul id="comment" class="touch" data-role="listview" data-inset="true" data-theme="a" data-divider-theme="a" data-icon="false"> <li data-role="list-divider">Monday, October 11, 2010 <span class="ui-li-count" style="margin-top: -2px; font-size: 12px; font-weight: bold;">5 stars</span></li> <li><a id="" href="" style=""> <img id="" src="/img.jpg" style="width:66px; height:66px; border: solid 2px #DCDCDC; outline:none; margin: 9px 7px; border-radius: 50%;" /> <h2 id="" onclick="">Testing</h2> <p style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non efficitur lorem. Phasellus efficitur, metus sit amet mattis ultrices, est est convallis leo, nec finibus quam nulla nec felis. Curabitur eleifend dolor elit, at finibus odio semper quis. Curabitur consectetur odio sit amet nulla varius cursus. Nullam ut nunc in neque dapibus aliquam vel quis risus. Nunc vitae odio eu ligula sagittis lacinia. Mauris id odio at enim lacinia gravida. Aenean ac sem vitae lorem aliquam gravida.</p> <span id="" class="ui-li-count"></span> </a> </li> </ul>

我试图将 <li> 和 <a> 的高度设置为自动，甚至我和它 1000px 来测试它，但没有任何效果。

jquery手机<li>css代码：

.ui-listview>li {
    display: block;
    position: relative;
    overflow: visible;
}
.ui-listview, .ui-listview>li {
    margin: 0;
    padding: 0;
    list-style: none;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.ui-listview, .ui-listview>li {
    margin: 0;
    padding: 0;
    list-style: none;
}
user agent stylesheet
ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: #f9f9f9;
    border-color: #bbb;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: #f9f9f9;
    border-color: #bbb;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
}

<a>代码：

.ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a .ui-btn, html body .ui-group-theme-a .ui-btn, html head+body .ui-btn.ui-btn-a, .ui-page-theme-a .ui-btn:visited, html .ui-bar-a .ui-btn:visited, html .ui-body-a .ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head+body .ui-btn.ui-btn-a:visited {
    background-color: #f6f6f6;
    border-color: #ddd;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
}
.ui-listview>.ui-li-has-thumb>.ui-btn, .ui-listview>.ui-li-static.ui-li-has-thumb {
    min-height: 3.625em;
    padding-left: 6.25em;
}
.ui-listview>.ui-li-has-count>.ui-btn, .ui-listview>.ui-li-static.ui-li-has-count, .ui-listview>.ui-li-divider.ui-li-has-count {
    padding-right: 2.8125em;
}
.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {
    color: #38c;
}
.ui-listview-inset>.ui-li-static, .ui-listview-inset>.ui-li-divider, .ui-listview-inset>li>a.ui-btn {
    border-right-width: 1px;
    border-left-width: 1px;
}
.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, .ui-listview>li>a.ui-btn {
    border-width: 1px 0 0;
    border-style: solid;
}
.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, .ui-listview>li>a.ui-btn {
    margin: 0;
    display: block;
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
    color: #38c;
    font-weight: 700;
}
a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}
.ui-listview, .ui-listview>li {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.ui-listview, .ui-listview>li {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: #f9f9f9;
    border-color: #bbb;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: #f9f9f9;
    border-color: #bbb;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
}

Answer 1

将<p>标签的white-spacecss属性设置为正常：

<p class="wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit...

.wrap {
  white-space: normal !important;
}

<p> listview 内的标签在 jquery 移动设备中自动设置文本

<p> tag inside listview autoset text in jquery mobile

css

jquery-mobile

DEMO