iphone css显示表不允许文本复制

时间:2014-03-13 14:54:52

标签: ios css css3 jquery-mobile mobile-website

我正在使用JQuery Mobile开发移动网络应用程序。我有一些使用显示表,行,单元格作为表格布局的div。

    <div class="table detail">
        <div>
            <div class="detailHeadings">Expiration:</div>
            <div class="detailValues">#{viewBean.expiration}</div>
        </div>
        <div>
            <div class="detailHeadings">ID:</div>
            <div>#{viewBean.Id}</div>
        </div>
        <div>
            <div class="detailHeadings">Email:</div>
            <div class="detailValues">#{viewBean.email}</div>
        </div>
        <div>
            <div class="detailHeadings">ZIP Code:</div>
            <div class="detailValues">#{viewBean.zipCode}</div>
        </div>
    </div>

使用以下css:

.table {
    display: table;
    width: 100%;
    color: #333333;
    table-layout: fixed;

}

.table > div {
    display: table-row;
}

.detail .detailValues {
    text-overflow: ellipsis;
    overflow: hidden;
    display: table-cell;
    white-space: nowrap;
}

.detailHeadings {
    font-weight: bold;
    padding-right: 10px;
    width: 30%;
    display: table-cell;
}

这很好用,但我希望能够只复制Id。当我在Windows手机或Android上长按时我可以选择id就好了。但是,在iOS上它只允许我选择整个表。这是我使用display:table时的问题。有没有办法让iOS知道我想要复制的内容?

1 个答案:

答案 0 :(得分:1)

将以下内容添加到您的CSS:

.table div .detailHeadings, .table div:not(:nth-child(2)) .detailHeadings + div {
    -khtml-user-select: none;     
    -moz-user-select: none;     
    -ms-user-select: none;     
    user-select: none;     
    -webkit-touch-callout: none;     
    -webkit-user-select: none; 
}
相关问题