标签: width

我有一个页面的div元素由JavaScript对齐.JavaScript只检查一组div元素以找到max offsetWidth,然后将所有div元素的宽度设置为max offsetWidth.它在大多数浏览器和语言环境中都很完美,但在Mac上的Firefox中法语 - 法语失败了.在这种情况下,div的内容包装.

<div id="divFoo">
    Heure de d&#233;but :
</div>

对于上面的HTML,下面的代码报告"79".

javascript:alert(document.getElementById('divFoo').offsetWidth);

但在代码报告"79.1333px"下面.

javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))

79.1333和79之间的差距使得不正确的宽度设置为内联样式.

我以前认为offsetWidth和width应该总是整数.有没有办法让offsetWidth正确圆？

我有一个父容器,它包含一个浮动项目列表.添加新的浮动项目时,父容器可以很好地向右扩展.

但是当我添加更多项目并且项目靠近窗口右侧时,新项目才会跳转到新行.相反,我希望它继续向右扩展,使我的父容器大于100%.

是否可以将容器宽度定义为max-width:infinite;？

要回答我自己的问题,我知道我可以制作最大宽度为5000%的东西,但我只是想知道是否有更好的解决方案.我认为页面的高度是最大宽度有点奇怪:无限; 并且页面的宽度不能具有相同的行为.

也许这只是一个愚蠢的问题,但无论如何我都会问:P.

我注意到,<code>对于它的宽度的任何修改都没有任何影响.它似乎总是设置为"自动".

我只是想在<code>标签内写一些代码(这个标签是强制性的,因为一些已知的iBooks错误),它有100%的宽度.一种解决方法是将<code>内部放置在<div>具有100%背景样式的内部.这工作正常,但我将不得不处理几百个<code>标签......这就是我希望能够修改<code>宽度的原因.

有什么想法吗？谢谢.

所以,假设我有这个标记;

<div>
  <span>Text one</span>
  <span class="sticky">ABC</span>
</div>
<div>
  <span>Some other text</span>
  <span class="sticky">DEF</span>
</div>
<div>
  <span>Lorem dolor sit amet lorem ipsum dolor</span>
  <span class="sticky">GHI</span>
</div>

哪个 - 随附CSS - 产生如下图所示的结果.

但是,当第一个文本span长于分配的宽度时,会出现问题div.通常情况下,正常的文本包装; 第二行span被撞到第二行的末尾.

但是,我希望这个元素只是一行.现在,当然要做到这一点,你做;

white-space: nowrap;
overflow: hidden;

但接下来发生的事情是第二个span消失为遗忘,因为它被第一个文本的长度所驱逐span.

我想要实现的是下面第三个例子中的图片.当第一个内容span是太长显示,text-overflow: ellipsis;将削减以点-点-点的字符串,而第二个span会推到最右侧边缘(padding在的div允许).

从本质上讲,第一个的伪max-width值span将等于它的宽度div,不包括它padding的宽度span.sticky,并且可以减去任何宽度(因为它的内容可能会变化,所以宽度没有设置).

我不知道max-width在接近这样的事情时是否真的是要走的路,但是我可以用来最好地描述我想要的行为.

是否有非JS方法来实现这一目标？

当子元素文本换行到新行时,如何使HTML父元素调整其宽度？我需要使用javascript还是可以用css完成？

以下是一个例子.

ul {
  align-items: stretch;
  justify-content: center;
  background: lightgrey;
  display: flex;
  flex-direction: row;
  height: 80px;
  justify-content: flex-start;
  padding-top: 20px;
  padding-bottom: 20px;
}
li {
  background-color: #303E49;
  display: flex;
  list-style: none;
  margin-right: 0.5em;
}
a {
  color: white;
  text-decoration: none;
  margin: 0.5em 0.5em 0.5em 0.5em;
  border: 1px solid white;
}

Resize this window horizontally to see what I am talking about.

<ul>
  <li>
    <a href="#">HowCanIMakeThisBoxShrink
            WhenTheTextBreaksToANewLine?</a>
  </li>
  <li>
    <a href="#">Text</a>
  </li>
  <li>
    <a href="#">Text</a>
  </li>
</ul>

我需要容器元素<li></li>宽度来匹配其子元素的文本宽度<a></a> …

react-native Dimensions.get("window").宽度为iPhone 6s返回375 ....它似乎远非正确.

`

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';



class AwesomeProject extends Component {

  render() {
    return <Text style={{margin:50}}>Width: {Dimensions.get("window").width}</Text>;
  }
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);`

在过去,我看到了下一个CSS,我在想是否存在一些实际的区别

min-width: 90px;
max-width: 90px;

和

width: 90px;

在iPAD上创建新的UITableViewCell时,contentView宽度设置为320.有没有办法获得正确的宽度？我无法使用当前视图的宽度,因为表格单元格不会跨越视图的整个宽度.任何帮助将不胜感激.

我有一个像素大小的表格,单元格的宽度取决于内容.表的第一行中有输入元素,我需要它们与parent()具有相同的宽度.我们的想法是应该自动计算这些输入的宽度,并使用jQuery以像素为单位进行设置.这些单元格和输入没有类或id.我只能使用具有以下代码的选择器设置一个单元格的宽度:

var parentWidth = $(".foo").width();
$('td.foo input').width(parentWidth);

但正如我所说,我需要它更普遍而不使用任何类等.任何人都可以帮助我吗？谢谢!

我需要计算svg文本元素的高度和宽度.有没有办法在没有实际添加到我的页面的DOM的情况下这样做？我只需要措施而不是实际要素.

我既不使用d3也不使用Raphael,而只使用简单的JavaScript.(也许我应该使用前者之一进行计算？)

我所追求的只是一个像imagettfbboxPHP 一样的函数,但在纯JavaScript中.有这样的事吗？还是写起来容易？

因为我实际上并没有使用文本元素,所以添加它们并隐藏它们似乎很奇怪(我也读过Firefox在计算隐藏元素的bbox时遇到问题,计算SVG文本的垂直高度).但也许这是唯一的出路？在这种情况下,我是否必须使用不透明度？之后我会以某种方式破坏元素吗？