的 DEMO

Question

我正在使用 jquery移动版1.4.5 的列表视图。我想在<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>的高度设置为auto，甚至我和它1000px来测试它但没有任何效果。

jquery mobile <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>标记的空格css atrribute设置为normal：

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

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

<p>标记在jquery mobile中的listview自动设置文本中

1 个答案:

的 DEMO