相关疑难解决方法(0)

我一直在用s和s word-wrap: break-word包装文本.但是,它似乎不适用于表格单元格.我有一个表设置,有一行和两列.列中的文本虽然使用上面的样式,但不会换行.它会使文本超出单元格的边界.这种情况发生在Firefox,谷歌浏览器和Internet Explorer上.divspanwidth:100%word-wrap

以下是源代码:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

上面的长词大于我的页面的边界,但它不会破坏上面的HTML.我已经尝试了以下建议加入text-wrap:suppress和text-wrap:normal,但也有帮助.

是否有任何使用纯HTML和CSS截断文本的好方法,以便动态内容可以适应固定宽度和高度的布局？

我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.

我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些？)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).

有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好？

我有一个长串(DNA序列).它不包含任何空格字符.例如:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

什么是css选择器强制将此文本包装在html:textarea或xul:textbox中

有没有理由避免使用text-align: justify;？

它会降低可读性还是导致问题？

如何显示长字符串,网站地址,字符或符号集以及自动换行符以保持div宽度？我猜各种各样的文字包装.通常添加一个空间有效,但有一个CSS解决方案,如自动换行？

例如,它(非常nastily)重叠的div,迫使水平滚动等wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

我可以添加到上面的字符串中以便在div中的几行内或浏览器窗口中整齐地放入它？

如果用户键入一条没有任何空格或空格的长行,它将通过比当前元素更宽来打破格式化.就像是:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ................................................. .................................................. ..........................................

我试过wordwrap()在PHP中使用,但问题是如果有链接或其他一些有效的HTML,它会中断.

CSS中似乎有一些选项,但它们都不适用于所有浏览器.在IE中查看自动换行.

你怎么解决这个问题？

我正在寻找一种跨浏览器的方式来包装具有预定宽度的div内部没有间隔空格(例如长URL)的长文本部分.

以下是我在网络上发现的一些解决方案以及它们为什么不适合我:

• 溢出:隐藏/自动/滚动 - 我需要在不滚动的情况下显示整个文本.div可以垂直增长,但不能水平增长.
• 注射和害羞; 通过js/server-side 进入字符串 - ­ 现在由FF3支持,但用­复制和粘贴URL; 在中间将无法在Safari中工作.此外,据我所知,没有一种简洁的方法来测量文本宽度,以找出最佳的字符串偏移量来添加这些字符(有一种hacky方式,请参阅下一项).另一个问题是放大Firefox和Opera很容易打破这个问题.
• 将文本转储到隐藏元素并测量offsetWidth - 与上面的项目相关,它需要在字符串中添加额外的字符.此外,测量长文本中所需的中断量可能很容易需要数千个昂贵的DOM插入(每个子串长度一个),这可以有效地冻结站点.
• 使用等宽字体 - 再次,缩放可能会弄乱宽度计算,并且文本无法自由设置样式.

看起来很有希望但不完全存在的事情:

• 自动换行:break-word - 它现在是CSS3工作草案的一部分,但它还没有得到Firefox,Opera或Safari的支持.如果它适用于所有浏览器,这将是理想的解决方案:(
• 通过js/server-side 将<wbr>标签注入到字符串中 - 复制和粘贴URL适用于所有浏览器,但我仍然没有很好的方法来测量放置中断的位置.此外,此标记使HTML无效.
• 在每个字符后添加中断 - 它比数千个DOM插入更好,但仍然不理想(将DOM元素添加到文档中会占用内存并减慢选择器查询速度等).

有没有人对如何解决这个问题有更多的想法？

我的客户要求在此页面上启用自动连字:http://carlosdinizart.com/biography/,我意识到我从未真正在网页上看到它.

是否可以仅使用HTML/CSS在HTML文档中设置自动连字？如果没有 - 有哪些选择？

是否有一个HTML字符,在所有(主要)浏览器(加上IE8可悲)没有显示任何内容并且不添加任何额外空间？

因此,替代 但不会向页面添加空格,并且不会显示为丑陋的"无法识别的字符"标记或?.

为什么:在我的情况下,我正在尝试解决旧的专有CMS上的问题,该问题正在删除所需的空元素但必需的HTML元素,因为系统的其他部分将动态填充它们.

想象一下(简化的简单示例)<span class="placeholder" data-type="username"></span>,如果用户登录,则填充用户的用户名 - 但是这个老式CMS将其视为空并删除它.

当<p>标签中的文字太长时,看起来像这样,如何用CSS防止这种情况？我已经尝试过CSS属性,word-break: break-all;但Firefox和Opera不支持这个属性,而且其他"正常"的单词也在破坏.所以我想要打破很长的单词,而不是短单词,取决于白色的宽度<div>.

body {
    background-color: #ccc;
}
h2 {
    float: left;
    color: #525254;
    margin: 0px;
    font: bold 15px Arial, Helvetica, sans;
}
.post {
    background-color: #fff;
    float: left;
    clear: both;
    padding: 20px;
    width: 500px;
    border-bottom: solid 1px #ddd;
}
.post_cell {
    display: table-cell;
    vertical-align: middle;
}
.post_body {
    display: table-cell;
    width: 400px;
    opacity: 0.8;
}
.profile_img {
    border: solid 3px #ccc;
    width: 48px;
    height: 48px;
    margin: 0px 15px;
}
.post_info {
    color: #c3c3c3;
    font: …