css - 标签在 jQuery Mobile 中的 ListView 自动设置文本中

Question

我正在使用 jquery 移动版本 1.4.5 的 ListView 。我想制作 <p>里面<li>根据宽度自动设置描述文本，但现在它不会自动设置，而是添加省略号。

代码如下:

<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-space css 属性标记为正常:

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

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

DEMO