可调整大小的div内div内的文本溢出浮动div

mer10z_tech

在可调整大小的jQuery jQuery内部,我有许多行div,并且在每一行中都有一个左右浮动div。当可调整大小的div小于两个浮动div时,我希望左侧浮动div使用text-overflow:省略号。正确的浮动式潜水尺码应保持相同。正如另一个问题所建议的那样,我尝试给左div留有一个右边距,但这似乎忽略了可调整大小的div的大小。

这是我目标的一个示例:

全尺寸行:

left div       right div

行调整为较小的宽度:

lef... right div

的HTML:

<div resizable>
    <div class="row">
        <div class="floatleft">test1 hello</div>
        <div class="floatright">test2 hello</div>
    </div>
    <div class="row">
        <div class="floatleft">test3 hello</div>
        <div class="floatright">test4 hello</div>
    </div>
</div>

CSS:

div[resizable] {
    border: 1px solid Black;
    width: 50%;
}

.floatleft {
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

.floatright {
    float: right;
    white-space: nowrap;
}

.row {
    overflow: hidden;
}

小提琴(使用angularjs,但不用担心):

http://jsfiddle.net/dfjrp8h5/1/

如果您能解释为什么浮动div右边距无效的话,您会获得加分。谢谢!

安农

你为什么float:left离开<div>首先在代码必须是正确的<div>float:right左挡必须overflow:hidden要清理。

HTML:

<div resizable>
    <div class="row">
        <div class="floatright">test2 hello</div>
        <div class="floatleft">test1 hello</div>
    </div>
    <div class="row">
        <div class="floatright">test4 hello</div>
        <div class="floatleft">test3 hello</div>
    </div>
</div>

CSS:

.floatleft {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floatright {
    float: right;
    white-space: nowrap;
    margin-left:10px;
}

演示

margin-right在浮动<div>工作中很好。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用html和javascript创建可拖动和可调整大小的div

通过拖动使d3 div可调整大小

可调整大小的div,不会更改“ left”属性

如何使这个可调整大小的div从边缘调整大小?

如果子div可调整大小,为什么父div只能调整高度?

jQuery可调整大小使我无法编辑div

JS可调整大小的div

可调整大小的div脚本调整大小将div推到视口之外

具有角度的可拖动和可调整大小的div

如何从各个角度制作可调整大小的div?

将整个svg调整为可调整大小的div

如何构建可调整大小的DIV以使用溢出:自动?

可调整大小的视频不完全适合父级div

如何在可调整大小和可滚动的div内的某个地方放置标签?

我需要TH中的可调整大小(jQuery ui)div不要小于TD宽度或使TD溢出:隐藏

Div在angular.js中可调整大小

可调整大小的div将文本框放在新行上吗?

在<div>中的jQuery可调整大小的画布

如何在可调整大小的引导面板中使子div占据父div的全部空间?

使用jQuery可调整大小的处理程序附加和调整div的大小

如何使div可调整大小

在没有jquery UI的div中单击时如何使图像可调整大小

如何获得可拖动和可调整大小的图像以及仅可调整div的图像?

具有z-index的可拖动,可调整大小的div

jQuery / Javascript可拖动和可调整大小不适用于div克隆

div中可调整大小和可拖动的图像

在使用可调整大小的 Jquery 增加 div 的大小时如何滚动?

如何让 CSS 溢出和高度:计算在可调整大小的 div 中工作

如何防止 jquery 可调整大小的 div 接收调整大小的单击事件