时间戳

首页 > 解决方案 > 分词不遵循文本对齐

html - 分词不遵循文本对齐

问题描述

我有一个 html，我需要在一个块中显示句子的换行，但它是浮动的。 结果

我想让字符串的其余部分（未显示的部分 b/c 它的溢出）显示在“非常”字的下方。

HTML

<body class='login'><div id="header">
            <div id="branding">
                 <h1 id="site-name"><a href="/">very long string that needs to be better displayed</a></h1>
            </div>
        </div></body>

CSS

#header #branding h1 {
    margin: 0;
    padding: 5px 10px;
    text-indent: 190px;
    background: white url(https://via.placeholder.com/150) 5px 0px no-repeat;
    height: 136px;
    width: 150px;
    background-size: 150px;
    white-space: pre;
}
.login #header h1 a {
    color: black;
    position: relative;
    top: 50px;
}

如果我尝试overflow-wrap:break-word它会显示如下：

溢出包装的结果

标签： htmlcss

解决方案

使用padding-leftsincetext-indent只会影响第一行。不要忘记添加box-sizing:border-box;以考虑宽度内的填充：

#header #branding h1 {
    margin: 0;
    padding: 5px 10px 5px 190px;
    background: white url(https://via.placeholder.com/150) 5px 0px no-repeat;
    width: 600px;
    box-sizing:border-box;
    background-size: 150px;
}
.login #header h1 a {
    color: black;
    position: relative;
    top: 50px;
}
<div id="header">
            <div id="branding">
                 <h1 id="site-name"><a href="/">very long string that needs to be better displayed</a></h1>
            </div>
        </div></body>

推荐阅读